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

Posted 2023-03-28

【中文标题】Angular Google Maps 组件更改选项不起作用

【英文标题】：Angular Google Maps component changing options not working

【发布时间】：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>

【参考方案1】：

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