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

Следующий код инициализирует карту листовки. Функция инициализации центрирует карту на основе местоположения пользователя. Как изменить центр карты на новую позицию после вызова функции инициализации?

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="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a> contributors, <a href="#" onclick="location.href='http://creativecommons.org/licenses/by-sa/2.0/'; return false;">CC-BY-SA</a>, Imagery © <a href="#" onclick="location.href='http://cloudmade.com'; return false;">CloudMade</a>'
}).addTo(map);

map.locate({setView: true, maxZoom: 8});    
}

Ответы

Ответ 1

Например:

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

Ответ 2

Вы также можете использовать:

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

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

Ответ 3

Используйте 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);

Это установит уровень просмотра так, чтобы он соответствовал границам в листовке карты.