Как изменить центр карты в 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

вы ... вы, ребята,

спасаете

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);

При этом уровень просмотра будет соответствовать границам в листовке карты.

Latinrickshaw
источник

Как изменить центр карты в Leaflet.js

Ответы: