在Leaflet中单击时缩放并居中标记

Question

我有一个与leaflet地图相关的问题。我的地图上有一些标记，当点击其中一个时，标记被居中显示。现在，我希望不仅当点击一个标记时它能够居中，而且还希望能够将地图缩放到该标记位置。当我添加下面这段代码：

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

to

    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之外，我应该怎么做才能使地图缩放到标记并且标记也居中呢？我对leaflet和jquery都比较陌生...

- user3671746

Answer 1

你可以使用单个方法setView和zoomoption，而不是使用setZoom和panTo。

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});
    });

- neogeomat

---

事实上，该解决方案仅在某些情况下有效。取决于我所处的缩放级别，缩放并不总是起作用并居中标记。标记通常超出视图（位于底部某处），而弹出窗口已打开。我只是想知道为什么会这样。 - user3671746

你的弹出窗口有多大？默认情况下，地图会移动标记以适应地图内的弹出窗口。解决方法是在弹出窗口中设置 autopan:false。 - neogeomat

只有在缩放级别非常高（例如18）时，才会出现所描述的问题。此时标记完全消失。如果使用map.setView(map.unproject(cM),15, {animate: true});则可以正常工作。弹出窗口是正常的，里面只有一个单词。 - user3671746

我认为这是因为这一行代码 cM.y -= centerMarker.popup._container.clientHeight/2。它的作用是什么？你可能会对 http://leafletjs.com/reference.html#icon-popupanchor 感兴趣。 - neogeomat

Answer 2

我为了将图标弹出窗口居中在屏幕上，所做的是将客户端高度除以缩放比例，这样就可以将弹出窗口居中。

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});
});

- James Brown

Answer 3

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

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

latlng[0], latlng[1] 是来自您的数据库对象或REST API的点。

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

- optimists