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

Ответы:


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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.