Comment changer le centre de la carte dans Leaflet.js

111

Le code suivant initialise une carte de dépliant. La fonction d'initialisation centre la carte en fonction de l'emplacement de l'utilisateur. Comment changer le centre de la carte à une nouvelle position après avoir appelé la fonction d'initialisation?

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 Joël James
la source

Réponses:

169

Par exemple:

map.panTo(new L.LatLng(40.737, -73.923));
Paulo Rodrigues
la source
23
map.flyTo([40.737, -73.923], 8) si vous voulez zoomer et animer aussi
Martin Belcher - AtWrk
4
Dans mon cas , cependant panTo(), flyTo(), setView()- tous me prendre au coin supérieur gauche de la carte, et non au centre.
Mrigank Pawagi
vous ... vous sauvez notre journée
Muneeb Mirza
128

Vous pouvez aussi utiliser:

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

Cela dépend simplement du comportement que vous souhaitez. map.panTo()effectuera un panoramique vers l'emplacement avec une animation de zoom / panoramique, tout map.setView()en définissant immédiatement la nouvelle vue sur l'emplacement / le niveau de zoom souhaité.

Greg Wilson
la source
4
J'aime celui-ci car vous obtenez également le niveau de zoom, ce qui est très utile.
M. Concolato
2
Vous pouvez également transmettre les coordonnées sous forme de tableau: map.setView([40.737, -73.923], 8)ou un objetmap.setView({lat:40.737, lng:-73.923}, 8)
leobelizquierdo
5
panTo ne montrait pas d'animation, j'utilisemap.setView(latlng, map.getZoom(), { animation: true });
Ivan Ferrer Villa
7

L'utilisation map.panTo();ne fait rien si le point est dans la vue courante. Utilisez map.setView()plutôt.

J'avais une polyligne et je devais centrer la carte sur un nouveau point de la polyligne à chaque seconde. Vérifiez le code: BON: https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

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

Vous pouvez également utiliser:

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

Cela définira le niveau de vue pour qu'il corresponde aux limites du dépliant de la carte.

Latinrickshaw
la source