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

Question

我按照这个例子http://jsfiddle.net/abenrob/ZkC5M/,当我点击标记我希望地图平移到标记并设置位置中心屏幕我的代码在下面但是当我点击map.setView(新的L.LatLng(位置) ),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();
            };
        }
    }

谢谢,

Answer 1

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

如果更换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/

Answer 2

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