宣传单:平移,居中,缩放地图到标记位置

时间:2017-03-26 03:24:40

标签: leaflet zoom pan

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

标记在PHP中生成为带有标题和纬度/长度的标记数组,并注入到一个名为"项目的javascript var中。"

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

1 个答案:

答案 0 :(得分:5)

  1. 将标记保存在关联数组中(索引必须是唯一的)。
  2. 在弹出文本中放置一个链接,以调用将此索引作为参数传递的函数。
  3. 在您的javascript函数中使用panToflyTo
  4. 这是一些伪代码:

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

    您可以查看http://www.franceimage.com以查看我如何使用它(点击标记,然后点击弹出窗口中的圆圈图标)