放大以便标记在 LeafletJS 中可见答案

【问题标题】：Zoom in so a marker is visible in LeafletJS放大以便标记在 LeafletJS 中可见
【发布时间】：2019-03-17 17:02:07
【问题描述】：

我正在使用 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

【解决方案1】：

好吧，所以不是直接回答原始问题，但这就是我要实现的目标。使用这个额外的插件：

https://github.com/ghybs/Leaflet.MarkerCluster.Freezable

我能够在某个阶段（标记较少时）禁用集群：

        // disable clustering at certain zoom
        if (window.VARS.Map_Modal.getZoom() >= 12) {
            window.VARS.markerCluster.freezeAtZoom();
        } else {
            window.VARS.markerCluster.enableClustering();
        }

然后我不需要放大，因为它们在当前视口中是可见的。我确信它不是一个完美的解决方案，但它应该可以满足我的需要。

我仍然有兴趣看看是否有人有其他解决方案（将来为其他人提供）

【讨论】：

【解决方案2】：

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

var myMarkerClusterGroup = L.markerClusterGroup();

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

myMarkerClustersGroup.zoomToShowLayer(layer);

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

这是来自official documentation 的此方法的文档：

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

【讨论】：