Leaflet单击标记时如何设置中心地图

时间:2016-02-02 09:53:20

标签: leaflet

我按照这个例子http://jsfiddle.net/abenrob/ZkC5M/,当我点击标记我希望地图平移到标记并设置位置中心屏幕时我的代码在下面,但是当我点击map.setView(new L.LatLng(position),5) ; 没有用。

 function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            var position = markers[i].getLatLng();

            if (markerID == id){              
                map.setView(new L.LatLng(position), 5);
                markers[i].openPopup();
            };
        }
    }

谢谢,

2 个答案:

答案 0 :(得分:8)

您所关注的示例说明了如何通过点击地图之外的链接来与标记进行交互,并且仅在您点击时调用您正在编辑的功能在其中一个链接上。它不会影响点击标记本身的行为。

如果您在已编辑的功能中将new L.LatLng(position)替换为position,则点击链接会使地图以相关标记为中心,但您的问题是如何通过单击标记本身来获得相同的行为。

为此,您可以创建一个单击标记时要调用的函数:

function clickZoom(e) {
    map.setView(e.target.getLatLng(),5);
}

然后在创建图层时附加.on('click', clickZoom),将点击事件监听器附加到每个标记,例如:

var marker1 = L.marker([51.497, -0.09], {
  title: "marker_1"
}).addTo(map).bindPopup("Marker 1").on('click', clickZoom);

这是一个更新的小提琴,显示了所有这些:

http://jsfiddle.net/ZkC5M/221/

答案 1 :(得分:5)

panTo()也应该起作用:

marker.addEventListener("click", function (e){
  map.panTo(this.getLatLng());
});

对于您的示例,它看起来像这样:

for(i = 0; i < markers.length; i++){
    markers[i].addEventListener("click", function(e){
        map.panTo(this.getLatLng());
    });
}