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

Question

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

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

Answer 1

Например:

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

Answer 2

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

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

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

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

Answer 4

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

var latLon = L.latLng(40.737, -73.923);
var bounds = latLon.toBounds(500); // 500 = metres
map.panTo(latLon).fitBounds(bounds);

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

Answer 5

В случае проблемы с центрированием карты, несмотря на использование panTo(), flyTo()или же setView()попробуй скорректировать картуmap.invalidateSize():

      setTimeout(function () {
    map.invalidateSize(true);
}, 100);

Пример jQuery:

      $(document).ready(function () {
    mymap.invalidateSize();
});

Answer 6

Я искал способ изменить границы, но без анимации. Это сработало для меня:

      var bounds = L.latLng(40.737, -73.923).toBounds();
map.fitBounds(bounds, {animation: false});