web-dev-qa-db-fra.com

Comment changer le centre de la carte dans Leaflet.js

Le code suivant initialise une carte de dépliants. La fonction d'initialisation centre la carte en fonction de l'emplacement de l'utilisateur. Comment changer le centre de la carte sur 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});    
}
javascriptleaflet
89
Joel James

Par exemple:

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

Vous pouvez aussi utiliser:

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

Cela dépend de quel comportement vous voulez. map.panTo() effectue un panoramique sur l'emplacement avec une animation zoom/panoramique, tandis que map.setView() définit immédiatement la nouvelle vue sur l'emplacement/niveau de zoom souhaité.

105
Greg Wilson

Utiliser map.panTo(); ne fait rien si le point est dans la vue actuelle. Utilisez map.setView() à la place.

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

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

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

mymap.panTo(point);
mymap.setZoom(11);
6
Stefan Nedelcu

Vous pouvez aussi 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 d'affichage pour qu'il corresponde aux limites de la fiche cartographique.

1
Latinrickshaw