如何将地图居中于单击的标记

Question

我按照这个例子：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();
            };
        }
    }

谢谢你，

Answer 1

您下面的示例说明了如何通过单击地图外部的链接与标记进行交互，并且仅当您单击这些链接之一时才会调用您正在编辑的函数。它不会影响点击标记本身的行为。

如果您在编辑的函数中将

new L.LatLng(position)

替换为

position

，单击 links 将导致地图以关联标记为中心，但您的问题是如何通过单击标记本身获得相同的行为.

为此，您可以创建一个在单击标记时调用的函数：

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

Answer 3

在实践中，

panTo()

和

setView()

的行为不同。

要使用视图加载地图，请在创建地图对象时使用

setView()

：

var map = L.map('map').setView([lat, long], 5);

要观看地图移动/平移，请在创建地图对象后使用其中之一：

map.setView([lat, long], 5);

或：

map.panTo([lat, long]);

注意：

setView()

允许您设置缩放，而

panTo()

仅支持位置。