Як змінити центр карти в Leaflet.js

111

Наступний код ініціалізує карту листівки. Функція ініціалізації орієнтує карту на основі місцезнаходження користувача. Як змінити центр карти на нове положення після виклику функції ініціалізації?

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

— Джоел Джеймс
джерело

169

Наприклад:

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

— Пауло Родрігес
джерело

23

map.flyTo([40.737, -73.923], 8) якщо ви хочете збільшити масштаб і анімувати

— Мартін Белчер - AtWrk

4

У моєму випадку , однак, panTo(), flyTo(), setView()- всі вони приймають мене в лівому верхньому кутку карти, а не в центрі.

— Mrigank Pawagi

ви ... хлопці, врятуйте наш день

— Muneeb Mirza

128

Ви також можете використовувати:

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

Це просто залежить від того, якої поведінки ви хочете. map.panTo()переміститься до місця з анімацією масштабування / панорамування, при цьому map.setView()негайно встановіть новий вид на потрібний рівень розташування / масштабування.

— Грег Вілсон
джерело

4

Мені це подобається, тому що ви також отримуєте рівень збільшення, що дуже корисно.

— Містер Конколато

2

Також ви можете передавати координати як масив: map.setView([40.737, -73.923], 8)або об'єктmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panTo не показував анімацію, я використовуюmap.setView(latlng, map.getZoom(), { animation: true });

— Іван Феррер Вілла

7

Використання 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);

Це встановить рівень перегляду відповідно до меж у листівці карт.

— Латингошо
джерело