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
source

169

Par exemple:

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

— Paulo Rodrigues
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
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
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
source