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

Odpowiedzi:

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