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

Posted 2023-03-16

【中文标题】当用户点击地图图钉时动态更改图标图像文件：谷歌地图

【英文标题】：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"  >
  <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>

你知道怎么做吗？

【参考方案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);