如何将 Circles 绑定到 Markers 以便它由 Marker-Clusterer 管理? Angular Google 地图组件
How to bind Circles to Markers so it will get managed by the Marker-Clusterer ? Angular GoogleMaps Component
我实际上想要实现的是为每个不在集群内的标记显示一个 MapCircle,当它在一个集群内时将其隐藏。
我知道我可以将图钉设计成圆形)但我需要显示精确的半径,这样我可以避免多次计算形状大小。
Clustered Img
Declustered Img
提前致谢!
我设法部分解决了这个问题,我不需要监听任何由“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>
但是我还是想不通怎么把圆图绑定到marker 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
更新:
我什至尝试扩展 Circle class 并为所谓的地图 属性 定义 getter 和 setter,我在其中尝试使用地图值设置选项。代码未被触发。
我已经尝试为标记上的“map_changed”事件添加一个侦听器,但它没有命中我的调试器,我希望在回调中能够以某种方式改变 Circle
的可见性
我实际上想要实现的是为每个不在集群内的标记显示一个 MapCircle,当它在一个集群内时将其隐藏。
我知道我可以将图钉设计成圆形)但我需要显示精确的半径,这样我可以避免多次计算形状大小。
Clustered Img Declustered Img
提前致谢!
我设法部分解决了这个问题,我不需要监听任何由“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>
但是我还是想不通怎么把圆图绑定到marker 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
更新:
我什至尝试扩展 Circle class 并为所谓的地图 属性 定义 getter 和 setter,我在其中尝试使用地图值设置选项。代码未被触发。
我已经尝试为标记上的“map_changed”事件添加一个侦听器,但它没有命中我的调试器,我希望在回调中能够以某种方式改变 Circle
的可见性