时间戳

首页 > 解决方案 > 放大以便标记在 LeafletJS 中可见

leaflet - 放大以便标记在 LeafletJS 中可见

问题描述

我正在使用LeafletJS ( https://leafletjs.com/reference-1.3.4.html ) 和Leaflet.markerclusterer ( https://github.com/Leaflet/Leaflet.markercluster ) 在我的网站上创建地图。我几乎完成了它的工作，但我无法弄清楚最后一部分。

我所做的是在视口中显示标记列表，如下所示：

在此处输入图像描述

然后，如果您单击底行中的其中一个，它将panTo()是正确的区域。

我遇到的问题是，如果（如您在我的示例中看到的）链接恰好位于此级别的集群中，那么您将看不到它。如何强迫它放大。

我需要的是一种一次放大一个步骤，直到它可见的方法。

window.VARS.markerCluster.eachLayer(function (layer) {

        if (layer.options.linkid == linkid) {

                console.dir(layer);
                window.VARS.Map_Modal.panTo(layer.getLatLng());

        }

});

这是我在谷歌地图上使用的一些代码来实现同样的事情，但显然它没有

           var zoom = window.VARS.Google_Map_Modal.getZoom();
            window.VARS.Google_Map_Modal.setCenter(window.VARS.markers[e.getAttribute('data-what')].getPosition());
            var zoomInterval = setInterval(function() {
                 if(!window.VARS.markers[e.getAttribute('data-what')].map) {
                     zoom++
                     if (zoom < 15) {
                        window.VARS.Google_Map_Modal.setZoom(zoom++);
                    }
                 } else {
                     clearInterval(zoomInterval);
                 }
            }, 300);

标签： leaflet

解决方案

由于您使用的是Leaflet.markercluster库，因此您可以简单地使用zoomToShowLayer，这是一个markerClustersGroup对象的方法。因此，要做到这一点，您必须在代码中的某处找到引用您的markerCLustersGroup对象的变量，该对象像这样初始化：

var myMarkerClusterGroup = L.markerClusterGroup();

一旦你有了你的组，你可以像这样调用上述方法：

myMarkerClustersGroup.zoomToShowLayer(layer);

...而不是使用window.VARS.Map_Modal.panTo(layer.getLatLng());

这是官方文档中此方法的文档：

zoomToShowLayer (layer, callback)：缩放以显示给定的标记（如果需要，可以进行蜘蛛操作），当标记在地图上可见时调用回调。

推荐阅读