当用户点击Map Pin: Google Map时，动态更改图标图像文件

Question

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

我在这里使用了Angular的谷歌地图组件。

我设置初始图标如下:(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>

你知道怎么做吗?

Answer 1

Typescript和VS code的智能感知是多么棒啊。刚刚尝试了一些dots，现在它工作了。

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {

marker.marker.setIcon({
url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`,

});
this.infoWindow.open(marker);
}