Leaflet.js中如何更改地图中心

Question

以下代码初始化了一个leaflet地图。initialize函数基于用户位置将地图居中。如何在调用initialize函数后更改地图的中心位置到新位置？

以下代码初始化了一个Leaflet地图。initialize函数基于用户位置居中地图。如何在调用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});    
} 

- Joel James

Answer 1

例如：

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

- Paulo Rodrigues

---

如果你想缩放并进行动画效果，可以使用以下代码：map.flyTo([40.737, -73.923], 8)。 - Martin Belcher - AtWrk

然而在我的情况下，panTo(), flyTo(), 以及 setView() 函数，都会将地图视角带到左上方，而不是中心。 - Mrigank Pawagi

@MrigankPawagi 使用 setTimeout(function () {map.invalidateSize(true)}, 100); - Jasom Dotnet

Answer 2

你还可以使用以下方法：

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

这取决于你想要的行为。 map.panTo() 会带有缩放/平移动画来到指定位置，而 map.setView() 则立即将视图更改到所需的位置/缩放级别。

- Greg Wilson

---

我喜欢这个选项，因为你还能获得缩放级别，这非常有用。 - Mr. Concolato

你可以将坐标作为数组传递：map.setView([40.737, -73.923], 8)，或者作为对象传递 map.setView({lat:40.737, lng:-73.923}, 8)。 - leobelizquierdo

panTo 没有展示动画，我使用 map.setView(latlng, map.getZoom(), { animation: true });。 - Ivan Ferrer Villa

动画仍然无法与“setView”一起工作。 - chovy

Answer 3

如果点已经在当前视图中，使用map.panTo();方法将不会产生任何效果。应该使用map.setView()代替。

我有一条折线，每秒钟需要将地图的中心定位到折线上的一个新点。请检查以下代码：

GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/

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

错误：https://jsfiddle.net/nstudor/Lgahv905/

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

- Stefan Nedelcu

---

对我来说没有动画。 - chovy

Answer 4

您也可以使用：

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

这将把视图级别设置为适应地图叶片中的范围。

- LatinRickshaw

Answer 5

在地图居中问题上，尽管使用了panTo()、flyTo()或setView()，但仍需尝试通过map.invalidateSize()来调整地图大小：

setTimeout(function () {
    map.invalidateSize(true);
}, 100);

jQuery 示例：

$(document).ready(function () {
    mymap.invalidateSize();
});

- Jasom Dotnet

Answer 6

我正在寻找一种方法来更改边界，但不需要动画效果。这对我有用：

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

- Akaisteph7