agm-marker iconUrl点击标记时更改

Nan*_*ncy -1 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
        }
    }">
Run Code Online (Sandbox Code Playgroud)

如何在单击标记时更改上面的iconUrl.

小智 9

您可以在数组对象上拥有一个属性,以了解您的对象具有哪种状态.您需要从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
    }
}">
Run Code Online (Sandbox Code Playgroud)