如何在有角度的谷歌地图上设置蜘蛛标记的图标

Question

我尝试使用包agm-oms(https://www.npmjs.com/package/agm-oms(在谷歌地图上实现标记蜘蛛机。我按照(https://github.com/SebastianM/angular-google-maps/pull/1329(中的说明进行操作。

<agm-map (mapReady)="mapReady($event)">
<agm-marker-cluster [maxZoom]="10" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker-spider>
<agm-marker *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lang">
<agm-snazzy-info-window [closeWhenOthersOpen]="true">
<ng-template>
<div class="row pop-over-content">
...
</div>
</ng-template>
</agm-snazzy-info-window>
</agm-marker>
</agm-marker-spider>
</agm-marker-cluster>
</agm-map>

现在，蜘蛛中的标记相互重叠。我希望找到一种方法来设置标记蜘蛛器的图标，以便： 在单击标记蜘蛛器之前，图标就像一个标记簇(图标中具有标记的数量(。单击蜘蛛器后，爬虫器中的每个标记都会显示自己的图标。 关于如何实现上述功能的任何想法？ 提前非常感谢您的帮助。

Answer 1

避免两个插件重叠的工作解决方案是使用基于缩放的条件包装它们：当缩放为 <= 12(例如(时将使用<agm-marker-cluster>，当缩放> 12 时将使用<agm-marker-spider>。

为了添加基于缩放的逻辑，我们使用了一个变量(例如称为 currentZoom(，该变量使用[zoom]初始化并使用(zoomChange)进行更新

由于这两个插件通过包装在它们内部工作，因此必须在每个插件中重复创建它们的循环。

<agm-map (zoomChange)="currentZoom = $event" [zoom]="currentZoom">
<agm-marker-cluster *ngIf="gpsZoom<=12">
<agm-marker *ngFor="let marker of markers">
...
</agm-marker>
</agm-marker-cluster>
<agm-marker-spider *ngIf="gpsZoom>12">
<agm-marker *ngFor="let marker of markers">
...
</agm-marker>
</agm-marker-spider>
</agm-map>

希望对您有所帮助。