时间戳

首页 > 解决方案 > agm-marker iconUrl 在单击标记时更改

google-maps - agm-marker iconUrl 在单击标记时更改

问题描述

我试图在单击时更改标记的 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。

标签： google-mapsgoogle-maps-markers

解决方案

你可以在你的数组对象上有一个属性来知道你的对象有什么状态。您需要从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
    }
}">

推荐阅读