Cómo cambiar el centro del mapa en Leaflet.js

111

El siguiente código inicializa un mapa de folleto. La función de inicialización centra el mapa según la ubicación del usuario. ¿Cómo cambio el centro del mapa a una nueva posición después de llamar a la función de inicialización?

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
fuente

Respuestas:

169

Por ejemplo:

map.panTo(new L.LatLng(40.737, -73.923));
Paulo Rodrigues
fuente
23
map.flyTo([40.737, -73.923], 8) si desea hacer zoom y animar también
Martin Belcher - AtWrk
4
En mi caso, sin embargo, panTo(), flyTo(), setView()- todos ellos me llevan a la parte superior izquierda del mapa, y no en el centro.
Mrigank Pawagi
ustedes ... ustedes salvan nuestro día
Muneeb Mirza
128

También puedes usar:

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

Solo depende del comportamiento que desee. map.panTo()se desplazará a la ubicación con la animación de zoom / panorámica, mientras que map.setView()inmediatamente establecerá la nueva vista en la ubicación / nivel de zoom deseado.

Greg Wilson
fuente
4
Me gusta este porque también obtienes el nivel de zoom, que es muy útil.
Mr. Concolato
2
También puede pasar las coordenadas como una matriz: map.setView([40.737, -73.923], 8)o un objetomap.setView({lat:40.737, lng:-73.923}, 8)
leobelizquierdo
5
panTo no mostraba animación, lo usomap.setView(latlng, map.getZoom(), { animation: true });
Ivan Ferrer Villa
7

El uso map.panTo();no hace nada si el punto está en la vista actual. Úselo en su map.setView()lugar.

Tenía una polilínea y tenía que centrar el mapa en un nuevo punto de la polilínea cada segundo. Verifique el código: BUENO: https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

mymap.panTo(point);
mymap.setZoom(11);
Stefan Nedelcu
fuente
4

También puedes usar:

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

Esto establecerá el nivel de vista para que se ajuste a los límites del folleto del mapa.

Latinrickshaw
fuente