Comment changer le centre de la carte dans Leaflet.js

Question

Le code suivant initialise une carte de feuilletage. La fonction d'initialisation centre la carte en fonction de l'emplacement de l'utilisateur. Comment puis-je 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});    
}

Answer 1

Par exemple :

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

Answer 2

Vous pouvez également utiliser :

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

Cela dépend simplement du comportement que vous souhaitez obtenir. map.panTo() se déplacera vers l'emplacement avec une animation zoom/pan, tandis que map.setView() Réglez immédiatement la nouvelle vue à l'emplacement/au niveau de zoom souhaité.

Answer 3

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

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);

Answer 4

Vous pourriez aussi utiliser :

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

Le niveau d'affichage sera ainsi adapté aux limites du dépliant cartographique.

Answer 5

Dans le cas d'un problème de centrage de carte, malgré l'utilisation de panTo() , flyTo() o setView() essayez d'ajuster la carte avec map.invalidateSize() :

setTimeout(function () {
    map.invalidateSize(true);
}, 100);

Exemple de jQuery :

$(document).ready(function () {
    mymap.invalidateSize();
});