当用户单击地图图钉时动态更改图标图像文件：Google 地图

Question

我需要在用户单击地图图钉时动态更改图标图像文件。

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

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

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

以上部分工作正常。即初始图标图像

当用户单击地图图钉时，我会像这样使用信息 window：（Note: 信息 window 没有问题，并且工作正常。）

@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`,
         }; 
   
    }

我是这样称呼公开信息的 window:

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

你知道怎么做吗？

Answer 1

Typescript 和 VS code IntelliSense 有多棒。刚尝试了几个 dots，现在可以用了。

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

    this.infoWindow.open(marker);
  }

当用户单击地图图钉时动态更改图标图像文件：Google 地图

Change the icon image file dynamically when the user clicked the Map Pin: Google map

google-maps

typescript

ionic-framework

angular