Question

我设法使用以下代码更改了当前单击的标记的图标。我在页面上有多个标记。现在的问题是，如果我单击第二个标记，则先前单击的标记的图标应更改为其原始标记。（inactive.png）和当前单击的标记的图标应使用（active.png）。如何实现？请帮忙。

在下面的代码中，如果m.isClicked为true，则使用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',

如何更改角度谷歌地图中先前单击的标记的图标

1 个答案: