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

111

以下代码初始化一个传单地图。初始化功能基于用户位置将地图居中。调用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

— 乔尔·詹姆斯
source

169

例如：

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

— 保罗·罗德里格斯
source

22

map.flyTo([40.737, -73.923], 8) 如果您也想缩放和设置动画

— 马丁·贝尔彻（Martin Belcher）-AtWrk '18

4

在我的情况然而，panTo()，flyTo()，setView()-所有的人都带我到左上的地图，而不是中心。

— Mrigank Pawagi '19

你...你们拯救了我们的一天

— Muneeb Mirza

128

您还可以使用：

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

这仅取决于您想要的行为。map.panTo()将使用缩放/平移动画平移到该位置，同时map.setView()立即将新视图设置为所需的位置/缩放级别。

— 格雷格·威尔逊
source

4

我喜欢这一点，因为您还可以获得缩放级别，这非常有用。

— 孔可拉托先生2014年

2

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

— leobelizquierdo

5

哑剧并没有显示动画，我用map.setView(latlng, map.getZoom(), { animation: true });

— 伊万·费雷尔别墅

7

map.panTo();如果该点在当前视图中，则Use 不执行任何操作。使用map.setView()代替。

我有一条折线，并且每秒钟必须将地图中心对准折线的新点。检查代码：好的：https：//jsfiddle.net/nstudor/xcmdwfjk/

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

坏：https : //jsfiddle.net/nstudor/Lgahv905/

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

— 斯蒂芬·内德尔库（Stefan Nedelcu）
source

4

您还可以使用：

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

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

— 拉丁人力车
source