当用户点击地图图钉时动态更改图标图像文件：谷歌地图答案

【问题标题】：Change the icon image file dynamically when the user clicked the Map Pin: Google map当用户点击地图图钉时动态更改图标图像文件：谷歌地图
【发布时间】：2021-12-06 04:48:36
【问题描述】：

当用户点击地图图钉时，我需要动态更改图标图像文件。

我在这里使用Angular Google map component。

我这样设置初始图标：（Note:我已经删除了这里所有不需要的代码）

    const url = `assets/images/pngs/mapPins/${mapPinInformation?.category}_grey.png`;

    markerOptions = {
      icon: { url },
    } as google.maps.MarkerOptions;
  });

以上部分运行良好。即初始图标图像

当用户单击地图图钉时，我会使用如下所示的信息窗口：（Note: 信息窗口没有问题，并且工作正常。）

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {
    this.infoWindow.open(marker);

      marker.icon = { // I have tried to changed it here. But it is not working?
      url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`,
         }; 
   
    }

这就是我所说的打开信息窗口：

<google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%">
  <map-marker
    #marker="mapMarker"
    *ngFor="let mapPinAddressMarkerPosition of location?.googleMap?.mapPinAddressMarkerPositions"
    [position]="mapPinAddressMarkerPosition?.markerPosition"
    [options]="location?.googleMap?.markerOptions"
    (mapClick)="openInfoCard(marker, mapPinAddressMarkerPosition?.mapPinInformation)"
  >
  </map-marker>

  <map-info-window [position]="position">
   
    <app-location-details
        [mapPinInformation]="mapPinInformation"
    >
    </app-location-details>
  </map-info-window>
</google-map>

你知道怎么做吗？

【问题讨论】：

标签： angular typescript google-maps ionic-framework

【解决方案1】：

Typescript 和 VS 代码 IntelliSense 真是太棒了。刚刚尝试了几个dots，它现在可以工作了。

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {
   
    marker.marker.setIcon({
      url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`,
      
    });

    this.infoWindow.open(marker);
  }

【讨论】：