单击标记时更改agm-marker iconUrl

时间:2018-10-15 13:26:21

标签: google-maps google-maps-markers

我试图在单击时更改标记的iconUrl。我正在使用谷歌角度地图。 iconUrl我正在使用本地资产文件夹进行设置,而不是通过服务API进行设置。

<agm-marker *ngFor="let m of mapArrayList; let i = index" (markerClick)="clickedMarker(infowindow)"
    [latitude]="m.geometry.location.lat()" [longitude]="m.geometry.location.lng()" 
    [iconUrl] ="
      {
        url: './assets/images/car.svg',
        scaledSize: {
            width: 40,
            height: 60
        }
    }">

单击标记后,如何更改上述iconUrl。

1 个答案:

答案 0 :(得分:7)

您可以在数组对象上拥有一个属性,以了解对象具有的状态。您需要通过markerClick事件来更新此属性。我在此示例中使用了isClicked属性。

在这种情况下,您可以检查需要加载哪个SVG。

<agm-marker *ngFor="let m of mapArrayList; let i = index" (markerClick)="clickedMarker(infowindow)"
[latitude]="m.geometry.location.lat()" [longitude]="m.geometry.location.lng()" 
[iconUrl] ="
  {
    url: m.isClicked ? './assets/images/car.svg' : './assets/images/bike.svg',
    scaledSize: {
        width: 40,
        height: 60
    }
}">