Come cambiare il centro della mappa in Leaflet.js

111

Il codice seguente inizializza una mappa volantino. La funzione di inizializzazione centra la mappa in base alla posizione dell'utente. Come cambio il centro della mappa in una nuova posizione dopo aver chiamato la funzione di inizializzazione?

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
fonte

169

Per esempio:

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

— Paulo Rodrigues
fonte

23

map.flyTo([40.737, -73.923], 8) se vuoi ingrandire e animare anche

— Martin Belcher - AtWrk

4

Nel mio caso però panTo(), flyTo(), setView()- tutti mi prendono a in alto a sinistra della mappa, e non il centro.

— Mrigank Pawagi

voi ... ragazzi salvate la nostra giornata

— Muneeb Mirza

128

Puoi anche usare:

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

Dipende solo dal comportamento che vuoi. map.panTo()eseguirà una panoramica della posizione con zoom / animazione panoramica, mentre map.setView()imposterà immediatamente la nuova vista alla posizione / livello di zoom desiderati.

— Greg Wilson
fonte

4

Questo mi piace perché ottieni anche il livello di zoom, che è molto utile.

— Sig. Concolato

2

Inoltre puoi passare le coordinate come un array: map.setView([40.737, -73.923], 8)o un oggettomap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panTo non mostrava l'animazione, io usomap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

L'utilizzo map.panTo();non ha effetto se il punto è nella vista corrente. Usa map.setView()invece.

Avevo una polilinea e dovevo centrare la mappa su un nuovo punto della polilinea ogni secondo. Controlla il codice: BUONO: https://jsfiddle.net/nstudor/xcmdwfjk/

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

CATTIVO: https://jsfiddle.net/nstudor/Lgahv905/

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

— Stefan Nedelcu
fonte

4

Potresti anche usare:

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

Ciò imposterà il livello di visualizzazione in modo che si adatti ai limiti del volantino della mappa.

— Latinrickshaw
fonte