单击传单中的缩放和中心标记答案

【问题标题】：Zoom and center marker on click in leaflet单击传单中的缩放和中心标记
【发布时间】：2014-08-23 01:08:47
【问题描述】：

我的传单地图有问题。我的地图上有一些标记，单击一个时，标记居中。现在我想在单击一个标记时它不仅居中而且我想放大标记。当我添加这个

    map.setZoom((16), {animate: true});

到

    map.on('popupopen', function(centerMarker) {
        var cM = map.project(centerMarker.popup._latlng);
        cM.y -= centerMarker.popup._container.clientHeight/2
        map.setZoom((16), {animate: true});
        map.panTo(map.unproject(cM),{animate: true});
    });

我的代码居中并没有真正起作用，因为它放大了但它没有使标记居中。但如果我处于预期的缩放级别 (16)，所有其他标记都会居中。如果我不在缩放级别 16 之外，我该怎么做才能使地图缩放到标记并且标记也居中？我对传单和 jquery 很陌生...

【问题讨论】：

标签： jquery leaflet marker

【解决方案1】：

除了使用setZoom 和panTo，您可以使用带有缩放选项的单一方法setView。

map.on('popupopen', function(centerMarker) {
        var cM = map.project(centerMarker.popup._latlng);
        cM.y -= centerMarker.popup._container.clientHeight/2
        map.setView(map.unproject(cM),16, {animate: true});
    });

【讨论】：

事实上，该解决方案仅在某些时候有效。根据我所处的缩放级别，缩放并不总是有效并将标记居中..标记通常不在视图中（在底部的某处）并且弹出窗口是打开的。我只是想知道为什么..
您的弹出窗口有多大？默认情况下，地图将平移标记以适应地图内的弹出窗口。解决方法是在弹出窗口中设置autopan:false。
所描述的问题仅在缩放级别非常高（例如 18）时出现。然后标记完全消失了。如果是map.setView(map.unproject(cM),15, {animate: true});它运作良好。弹窗正常，里面只有一个字。
我认为是因为这条线cM.y -= centerMarker.popup._container.clientHeight/2。它应该做什么？您可能对leafletjs.com/reference.html#icon-popupanchor 感兴趣

【解决方案2】：

我将屏幕上的图标弹出窗口居中所做的是通过缩放来划分 clientHeight 并将弹出窗口居中：

mymap.on('popupopen', function(centerMarker) {
  const zoomLvl = 13;
  let cM = mymap.project(centerMarker.popup._latlng);

  cM.y -= centerMarker.popup._container.clientHeight / zoomLvl
  console.log(mymap.unproject(cM));
  mymap.setView(mymap.unproject(cM), zoomLvl, {animate: true});
});

【讨论】：

【解决方案3】：

所有解决方案除了，这里是基本和自动缩放点解决方案：

const map = L.map("map", { layers: [osm], minZoom: 13 });
map.setView([latlng[0], latlng[1]], 13);

latlng[0], latlng[1] 是来自您的 db 对象或来自 REST api 的点。

这将在点的中心自动缩放。

【讨论】：