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

喜你入骨 提交于 2019-12-13 22:39:43

问题


I managed to change the icon of currently clicked marker using the below code. I have multiple markers on page. Now the issue is , if i click the second marker, the icon of the previously clicked marker should be changed to its original one (inactive.png) and the icon of currently clicked marker should use (active.png).How can I achieve this? Please help.

In the below code if m.isClicked is true, then inactive.png is used, else active.png is used.

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

回答1:


Instead of using a boolean, you could have a variable on your component storing the selected index (or element id if you have it) and checking if index === this.selectedIndex you can set icon active or disabled.

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


来源:https://stackoverflow.com/questions/52836624/how-to-change-icon-of-previously-clicked-marker-in-angular-google-maps

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!