當用戶單擊 Map Pin 時，我需要動態更改圖示影像檔案。
我在這里使用了Angular Google 地圖組件。
我像這樣設定初始圖示：（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>
你知道怎么做嗎？
uj5u.com熱心網友回復：
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);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/330078.html
上一篇：甚至在影像標簽上系結點擊