1

我尝试使用包 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 spiderfier之前，图标就像一个marker cluster（其中包含图标中的marker数量）。单击蜘蛛生成器后，蜘蛛生成器中的每个标记都会显示自己的图标。关于如何实现上述功能的任何想法？非常感谢您的帮助。

4

1 回答 1

0

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

为了添加基于缩放的逻辑，我们使用了一个变量（例如，称为 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>

希望能帮助到你。

于 2019-11-14T16:28:38.537 回答