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

下面的代码初始化传单映射。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});
}

189352 次浏览

小开

最佳答案

例如:

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

小开

你亦可使用:

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

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

小开

如果点在当前视图中，则使用 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);

小开

你也可以使用:

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

这将设置视图水平以适应地图小册子中的边界。

小开

我正在寻找一种方法来改变界限，但没有动画。这对我很有效:

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

小开

如果使用 panTo()、 flyTo()或者 setView()来调整地图中心位置，那么使用 map.invalidateSize()来调整地图:

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

JQuery 示例:

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