Jak zmienić środek mapy w Leaflet.js

111

Poniższy kod inicjuje mapę ulotki. Funkcja inicjalizacji wyśrodkowuje mapę na podstawie lokalizacji użytkownika. Jak zmienić środek mapy na nową pozycję po wywołaniu funkcji inicjalizacji?

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

— Joel James
źródło

169

Na przykład:

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

— Paulo Rodrigues
źródło

23

map.flyTo([40.737, -73.923], 8) jeśli chcesz również powiększać i animować

— Martin Belcher - AtWrk

4

W moim przypadku jednak panTo(), flyTo(), setView()- wszystkie z nich zabrać mnie do góry w lewo na mapie, a nie do środka.

— Mrigank Pawagi

wy ... ratujcie nasz dzień

— Muneeb Mirza

128

Możesz także użyć:

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

Zależy to tylko od tego, jakiego zachowania chcesz. map.panTo()przesunie do lokalizacji z animacją powiększania / przesuwania, jednocześnie map.setView()natychmiast ustawiając nowy widok na żądaną lokalizację / poziom powiększenia.

— Greg Wilson
źródło

4

Podoba mi się ten, ponieważ dostajesz również poziom powiększenia, który jest bardzo przydatny.

— Mr. Concolato,

2

Możesz również przekazać współrzędne jako tablicę: map.setView([40.737, -73.923], 8)lub obiektmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo.

5

PanTo nie pokazywał animacji, ja używammap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

Użycie map.panTo();nic nie robi, jeśli punkt znajduje się w bieżącym widoku. Użyj map.setView()zamiast tego.

Miałem polilinię i musiałem wyśrodkować mapę do nowego punktu w polilinii w każdej sekundzie. Sprawdź kod: DOBRY: https://jsfiddle.net/nstudor/xcmdwfjk/

mymap.setView(point, 11, { animation: true });

ŹLE: https://jsfiddle.net/nstudor/Lgahv905/

mymap.panTo(point);
mymap.setZoom(11);

— Stefan Nedelcu
źródło

4

Możesz również użyć:

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

Spowoduje to ustawienie poziomu widoku tak, aby pasował do granic ulotki mapy.

— Latinrickshaw
źródło