如何在 Leaflet.js 中更改地图中心答案

【问题标题】：How to change the map center in Leaflet.js如何在 Leaflet.js 中更改地图中心
【发布时间】：2012-09-25 23:07:33
【问题描述】：

以下代码初始化传单地图。初始化函数根据用户位置使地图居中。调用initialize函数后如何改变地图中心到新位置？

function initialize() {
map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery Â© <a href="http://cloudmade.com">CloudMade</a>'
}).addTo(map);

map.locate({setView: true, maxZoom: 8});    
}

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

例如：

map.panTo(new L.LatLng(40.737, -73.923));

【讨论】：

map.flyTo([40.737, -73.923], 8) 如果你也想缩放和动画
在我的情况下，panTo()、flyTo()、setView() - 所有这些都将我带到地图的 左上角，而不是中心。

【解决方案2】：

你也可以使用：

map.setView(new L.LatLng(40.737, -73.923), 8);

这取决于你想要什么行为。 map.panTo() 将平移到具有缩放/平移动画的位置，而map.setView() 立即将新视图设置为所需的位置/缩放级别。

【讨论】：

我喜欢这个，因为你还可以得到缩放级别，这非常有用。
您也可以将坐标作为数组传递：map.setView([40.737, -73.923], 8) 或对象map.setView({lat:40.737, lng:-73.923}, 8)
panTo 没有显示动画，我使用map.setView(latlng, map.getZoom(), { animation: true });

【解决方案3】：

如果该点位于当前视图中，则使用map.panTo(); 不会执行任何操作。请改用map.setView()。

我有一条折线，我必须每秒将地图居中到折线中的一个新点。检查代码：好：https://jsfiddle.net/nstudor/xcmdwfjk/

mymap.setView(point, 11, { animation: true });

不好：https://jsfiddle.net/nstudor/Lgahv905/

mymap.panTo(point);
mymap.setZoom(11);

【讨论】：

【解决方案4】：

你也可以使用：

var latLon = L.latLng(40.737, -73.923);
var bounds = latLon.toBounds(500); // 500 = metres
map.panTo(latLon).fitBounds(bounds);

这将设置视图级别以适应地图传单中的边界。

【讨论】：

【解决方案5】：

我正在寻找一种方法来更改边界但没有动画。这对我有用：

var bounds = L.latLng(40.737, -73.923).toBounds();
map.fitBounds(bounds, {animation: false});

【讨论】：