Como alterar o centro do mapa em Leaflet.js

111

O código a seguir inicializa um mapa de folheto. A função de inicialização centraliza o mapa com base na localização do usuário. Como mudo o centro do mapa para uma nova posição após chamar a função de inicialização?

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

Por exemplo:

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

— Paulo rodrigues
fonte

23

map.flyTo([40.737, -73.923], 8) se você quiser

— aplicar

4

No meu caso no entanto, panTo(), flyTo(), setView()- todos eles me levar para o canto superior esquerdo do mapa, e não o centro.

— Mrigank Pawagi

vocês ... vocês salvam o nosso dia

— Muneeb Mirza

128

Você também pode usar:

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

Depende apenas do comportamento que você deseja. map.panTo()irá deslocar para o local com zoom / animação panorâmica, enquanto map.setView()define imediatamente a nova visualização para o local / nível de zoom desejado.

— Greg Wilson
fonte

4

Eu gosto deste porque você também obtém o nível de zoom, que é muito útil.

— Sr. Concolato,

2

Além disso, você pode passar as coordenadas como uma matriz: map.setView([40.737, -73.923], 8)ou um objetomap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panTo não estava exibindo animação, eu usomap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

O uso map.panTo();não faz nada se o ponto estiver na vista atual. Use em seu map.setView()lugar.

Eu tinha uma polilinha e precisava centralizar o mapa em um novo ponto da polilinha a cada segundo. Verifique o código: BOM: https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

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

— Stefan Nedelcu
fonte

4

Você também pode usar:

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

Isso definirá o nível de visualização para caber nos limites do folheto do mapa.

— Latinrickshaw
fonte