Angular Google Maps组件设置marker不透明度功能失效问题

你自行维护的this.manager.markers数组中的google.maps.Marker实例，和<map-marker>组件内部实际渲染的原生Marker实例是相互独立的对象，你修改自己维护的实例属性不会作用到页面渲染的元素上，因此setOpacity调用看不到效果。

提供两种可直接落地的实现方式：

方式1：操作事件返回的原生实例 #

mapMouseover事件返回的$event对象包含当前触发事件的渲染层原生Marker实例，直接操作该实例即可：

<google-map
  [options]="options"
  [width]="'100%'"
  (mapClick)="manager.onMapClick($event)"
>
  <map-marker
    *ngFor="let marker of manager.markers"
    [position]="manager.getMarkerPosition(marker)"
    (mapMouseover)="$event.marker.setOpacity(0.5)"
    (mapMouseout)="manager.onMarkerExit($event.marker)"
    (mapClick)="manager.onMarkerClick($event.marker)"
  ></map-marker>
</google-map>

注：不同版本Angular Google Maps的事件返回结构可能有差异，如果上述写法不生效，可打印$event确认原生Marker实例的字段名，替换为对应字段即可。

方式2：数据绑定实现（更符合Angular开发规范） #

抛弃自行维护原生google.maps.Marker实例的写法，改用业务数据模型配合组件输入属性绑定实现效果，不需要手动操作DOM/原生实例：

1. 调整Marker数据结构：

// 自定义业务Marker模型，无需封装原生Marker实例
interface BusinessMarker {
  position: google.maps.LatLngLiteral;
  opacity: number;
  // 其他业务字段可自行扩展
}

// manager中markers改为业务模型数组
markers: BusinessMarker[] = [];

2. 调整模板绑定逻辑：

<google-map
  [options]="options"
  [width]="'100%'"
  (mapClick)="manager.onMapClick($event)"
>
  <map-marker
    *ngFor="let marker of manager.markers"
    [position]="marker.position"
    [opacity]="marker.opacity"
    (mapMouseover)="marker.opacity = 0.5"
    (mapMouseout)="marker.opacity = 1"
    (mapClick)="manager.onMarkerClick(marker)"
  ></map-marker>
</google-map>

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