如何更改 angular google 地图中先前单击的标记的图标

Question

我设法使用以下代码更改了当前单击的标记的图标。我在页面上有多个标记。现在的问题是，如果我点击第二个标记，之前点击的标记的图标应该更改为原来的图标 (inactive.png) 和当前点击标记的图标应该使用 (active.png)。我怎样才能做到这一点？请帮忙。

在下面的代码中，如果 m.isClicked 为真，则使用 inactive.png，否则使用 active.png。

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




 clickedMarker(infowindow, m) {
        m.isClicked = false;   // once the marker is clicked, the icon of marker changes from inactive.png to active.png
        if (this.previous) {
    // this is to close the previously opened infowindow.
          this.previous.close();
        }
        this.previous = infowindow;
      }

Answer 1

您可以在组件上使用一个变量来存储所选索引（或元素 ID，如果有）并检查 index === this.selectedIndex 您是否可以将图标设置为活动或禁用，而不是使用布尔值。

url: index === this.selectedIndex ? './assets/images/marker_active.png' : './assets/images/marker_inactive.png',

如何更改 angular google 地图中先前单击的标记的图标

How to change icon of previously clicked marker in angular google maps

google-maps

marker