[英]How to change the map center in Leaflet.js
以下代碼初始化 leaflet map。初始化 function 根據用戶位置將 map 居中。 如何在調用初始化 function 后將 map 的中心更改為新的 position?
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 © <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});
}
例如:
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);
這將設置視圖級別以適合地圖傳單中的邊界。
我一直在尋找一種改變界限但沒有 animation 的方法。這對我有用:
var bounds = L.latLng(40.737, -73.923).toBounds();
map.fitBounds(bounds, {animation: false});
在地圖居中問題的情況下,盡管使用panTo()
、 flyTo()
或setView()
嘗試使用map.invalidateSize()
調整 map :
setTimeout(function () {
map.invalidateSize(true);
}, 100);
jQuery 樣本:
$(document).ready(function () {
mymap.invalidateSize();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.