单击agm-marker iconUrl更改标记 [英] agm-marker iconUrl change on click of marker

问题描述

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

I am trying to change the iconUrl of marker when it is clicked . I am using angular google maps. iconUrl I am setting using my local assets folder and not from service 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.

How can I change the above iconUrl when a marker is clicked.

推荐答案

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

You could have a property on your array objects to know which state your object has. You would need to update this property from markerClick event. I used isClicked property on this example.

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

In this case you could check which SVG is needed to be loaded.

<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
    }
}">

这篇关于单击agm-marker iconUrl更改标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！