传单：平移、居中、缩放地图到标记位置

Question

我是 Leaflet 的新手，到目前为止玩得很开心。我有一张交互式地图，其中包含 170 个左右的世界各地标记。每个标记在弹出窗口中都有一个标题。我还想在弹出窗口中添加一个 "zoom to" link。当用户点击缩放到时，我希望地图以标记为中心并放大到某个缩放级别（见图）

标记在 PHP 中作为带有标题和 lat/longs 的标记数组生成，并注入到名为 "items."[=12 的 javascript 变量中=]

    for (var i = 0; i < items.length; i++) {
        marker = new L.marker([items[i][1],items[i][2]])
            .bindPopup(items[i][0])
            .addTo(map);
    }

Answer 1

将您的标记保存在一个关联数组中（索引必须是唯一的）。
在您的弹出文本中放置一个 link 以调用一个将此索引作为参数传递的函数。
在你的 javascript 函数中使用 panTo or flyTo

这是一些伪代码：

var markersById = {};   

for (var i = 0; i < items.length; i++) {
  marker = new L.marker([items[i][1],items[i][2]])
      .bindPopup('<a href="javascript:centerMapOnPost(' + i + ')">Center on map</a>')
      .addTo(map);

  markersById[i] = marker;
}


function centerMapOnPost(markerId) {
    map.panTo(markersById[markerId].getLatLng());
}

传单：平移、居中、缩放地图到标记位置

Leaflet: Pan, center, zoom map to marker location

zooming

pan

leaflet