AGM（角度谷歌地图）的箭头符号（折线）答案

【问题标题】：Arrow Symbols (Polyline) for AGM(Angular Google Map)AGM（角度谷歌地图）的箭头符号（折线）
【发布时间】：2022-04-13 15:51:30
【问题描述】：

在角度 6 中。我正在为 agm-polyline 使用流动代码。我想在 agm-polyline 中添加箭头符号（折线）（https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow）。但是编译器显示错误，例如无法绑定到“图标”，因为它不是“agm-polyline”的已知属性....

<agm-polyline [strokeColor]="color" [icon]="icon"  >
          <agm-polyline-point  *ngFor="let marker of markers ; let i=index"  [latitude]="marker.lat" [longitude]="marker.lng">
          </agm-polyline-point>
    
        </agm-polyline>

对于 agm-polyline 箭头符号（折线）我该怎么办？

【问题讨论】：

您对此有什么解决方案吗？
@janakaaravinda 还没有。

标签： angular6 angular-google-maps google-polyline

【解决方案1】：

<agm-polyline [strokeColor]="'red'" [strokeWeight]="'1.5'">
                                        <agm-icon-sequence [fixedRotation]="false"
                                            [repeat]= "'50px'"
                                            [offset]="100" 
                                            [path]="'FORWARD_OPEN_ARROW'">
                                        </agm-icon-sequence>
                                        <agm-polyline-point *ngFor="let line of circles_path" 
                                        [latitude]="line.lat"
                                        [longitude]="line.long" >
                                        </agm-polyline-point>
                                    </agm-polyline>

【讨论】：

【解决方案2】：

agm 使用 [iconUrl] 而不是 [icon]。尝试在 .ts 文件中设置 Url，如下所示：


  public icon = {
    url: 'http://earth.google.com/images/kml-icons/track-directional/track-4.png',
    scaledSize: {
      width: 30,
      height: 30
    }
}

【讨论】：