如何在角度谷歌地图上设置 Spiderfier Marker 的图标

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>

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

Answer 1

我避免两个插件重叠的工作解决方案是使用基于缩放的条件包装它们：<agm-marker-cluster> 将在缩放为 <agm-marker-spider> 将在缩放为> 时使用12.

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

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

<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>

希望对你有帮助。