如何将 Circles 绑定到 Markers 以便由 Marker-Clusterer 管理? Angular GoogleMaps 组件

问题描述 投票:0回答:1

我实际上想要实现的是为不在集群内的每个标记显示一个MapCircle,并在它位于集群内时隐藏它。

我知道我可以将图钉设计为圆形),但我需要显示精确的半径,这样我可以避免对形状尺寸进行多次计算。

Clustered Img Declustered Img

提前谢谢您!

angular typescript google-maps-api-3 markerclusterer angular12
1个回答
0
投票

我设法部分解决了这个问题,并且我不需要监听“map-marker-clusterer”触发的任何事件。

标记由集群通过标记的“地图”属性进行管理(如果它有地图,则显示标记)。因此,我发现了为什么在地图上还添加了图钉以及簇大小的问题......当我创建标记时,我为标记指定了“地图”。

现在关于标记周围的圆圈,对于每个标记,您可以创建一个圆圈并将标记的位置绑定到圆圈中心。

 <google-map width="100%" height="100%">
        <map-marker-clusterer [averageCenter]="true" #clusterer>
          <map-marker *ngFor="let marker of markers" [visible]="false" [position]="marker.getPosition()"></map-marker>
        </map-marker-clusterer>
        <map-circle *ngFor="let circle of circles" [center]="circle.getCenter()" [radius]="100"></map-circle>
      </google-map>

但是我仍然不知道如何将圆形地图绑定到标记地图属性以由集群管理(在创建集群时隐藏) 圆没有“地图”属性,但 CircleOptions 有一个。 (导入 CircleOptions = google.maps.CircleOptions)

       const marker = new Marker({
        position: new MapCoordinates(address.lat, address.lng) 
       });

      const circle = new Circle();
      circle.bindTo('center', marker, 'position'); //Works like a charm


      circle.bindTo('map', marker, 'map'); // Doesn't work

更新:

  1. 我什至尝试扩展 Circle 类并为所谓的地图属性定义 getter 和 setter,在该属性中我尝试使用地图值设置选项。代码没有被触发。

  2. 我尝试在标记上添加“map_changed”事件的侦听器,但它没有命中我的调试器,我希望在回调中能够以某种方式改变圆的可见性

© www.soinside.com 2019 - 2024. All rights reserved.