我之前也碰到过一模一样的问题，直接修改MapMarker组件实例的icon属性根本不生效，后来才搞明白：Angular的map-marker组件是通过[options]输入属性同步到Google Maps原生Marker对象的，直接改组件实例的属性并不会触发组件内部的更新逻辑。下面给你两种可行的解决方案，按需选就行：

方案一：直接操作Google Maps原生Marker对象（最简单快捷） #

Angular的MapMarker组件提供了getNativeMarker()方法，能直接拿到底层的Google Maps Marker实例，然后调用原生API的setIcon()方法修改图标，这种方法几乎不用改现有代码：

修改你的openInfoCard方法：

@ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
// 记录当前激活的标记，用于切换时重置图标
private activeMarker: google.maps.Marker | null = null;
private activeCategory: string | null = null;

openInfoCard(marker: MapMarker, mapPinInformation: MapPinInformationModel): void {
  // 先把之前激活的标记重置回灰色图标
  if (this.activeMarker && this.activeCategory) {
    this.activeMarker.setIcon({
      url: `assets/images/pngs/mapPins/${this.activeCategory}_grey.png`
    });
  }

  this.infoWindow.open(marker);
  
  // 获取原生Marker对象并修改图标
  const nativeMarker = marker.getNativeMarker();
  if (nativeMarker) {
    nativeMarker.setIcon({
      url: `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`
    });
    // 更新当前激活的标记信息
    this.activeMarker = nativeMarker;
    this.activeCategory = mapPinInformation?.category;
  }
}

这种方法绕开了Angular的绑定机制，直接操作底层API，图标会立即更新，非常适合快速解决问题。

方案二：通过Angular响应式绑定更新标记Options（更符合Angular风格） #

如果希望遵循Angular的响应式设计原则，可以给每个标记维护独立的options对象，通过修改对象属性触发变更检测：

1. 在组件类中创建标记Options数组 #

每个标记对应一个独立的MarkerOptions对象，初始化时设置默认灰色图标：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MapInfoWindow, MapMarker } from '@angular/google-maps';

export class YourComponent implements OnInit {
  markerOptionsArray: google.maps.MarkerOptions[] = [];
  @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

  ngOnInit(): void {
    // 假设你的location数据已经加载完成
    this.location?.googleMap?.mapPinAddressMarkerPositions.forEach(pos => {
      const iconUrl = `assets/images/pngs/mapPins/${pos?.mapPinInformation?.category}_grey.png`;
      // 给每个标记创建独立的Options，同时存储分类信息用于后续重置
      this.markerOptionsArray.push({
        icon: { url: iconUrl },
        category: pos?.mapPinInformation?.category
      } as google.maps.MarkerOptions);
    });
  }
}

2. 修改模板绑定 #

将[options]绑定到数组中对应的元素，并在点击事件中传递标记的索引：

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

3. 更新openInfoCard方法 #

通过索引找到对应的Options对象，修改图标URL，同时重置其他标记的图标：

openInfoCard(marker: MapMarker, index: number, mapPinInformation: MapPinInformationModel): void {
  // 重置所有标记为灰色图标
  this.markerOptionsArray.forEach(opt => {
    opt.icon.url = `assets/images/pngs/mapPins/${opt['category']}_grey.png`;
  });
  
  // 设置当前标记为蓝色图标
  const currentOptions = this.markerOptionsArray[index];
  currentOptions.icon.url = `assets/images/pngs/mapPins/${mapPinInformation?.category}_blue.png`;
  
  this.infoWindow.open(marker);
}

如果Angular没有自动检测到对象属性的变化，可以注入ChangeDetectorRef手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 在修改完图标后调用
this.cdr.detectChanges();

为什么原来的代码不生效？ #

你之前直接修改marker.icon的方式失效，核心原因是MapMarker组件并没有监听自身icon属性的变化——它只会在初始化时，或者[options]输入属性发生变化时，才会同步到原生Marker对象。直接修改组件实例的属性不会触发这个同步逻辑，所以图标自然不会更新。

内容的提问来源于stack exchange，提问作者Sampath