Angular Google Maps 组件更改选项不起作用答案

【问题标题】：Angular Google Maps component changing options not workingAngular Google Maps 组件更改选项不起作用
【发布时间】：2021-10-22 18:03:01
【问题描述】：

我正在使用谷歌地图组件并在其中显示几个谷歌地图标记组件。我有 mapMouseOver(hover) 事件，它应该改变标记的不透明度，但是它不起作用。我已经测试了该事件并且它可以正常触发，只是marker.setOpacity(0.5) 的一行没有生效。此外，this.manager.markers 的类型为 google.maps.Marker[]

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

【问题讨论】：

标签： angular google-maps google-maps-markers

【解决方案1】：

找到了解决方法。在组件 ts 文件中，我使用 @ViewChildren<MapMarker> 来引用组件，然后使用 MapMarker.marker 属性从这些组件中引用标记对象。使用这些对象，更改生效。我对为什么第一种方法不起作用的猜测是 *ngFor="let marker of this.manager.markers" 可能正在创建 this.manager.markers 标记的副本并使用它们而不是 this.manager.markers 标记。

【讨论】：