So ändern Sie das Kartencenter in Leaflet.js

111

Der folgende Code initialisiert eine Faltblattkarte. Die Initialisierungsfunktion zentriert die Karte basierend auf dem Benutzerstandort. Wie ändere ich die Mitte der Karte nach dem Aufrufen der Initialisierungsfunktion an eine neue Position?

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
quelle

169

Beispielsweise:

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

Paulo Rodrigues
quelle

21

map.flyTo([40.737, -73.923], 8) Wenn Sie auch zoomen und animieren möchten

Martin Belcher - AtWrk

4

In meinem Fall jedoch panTo(), flyTo(), setView()- sie alle nehmen mich auf die oben links von der Karte und nicht das Zentrum.

Mrigank Pawagi

Sie ... Sie retten unseren Tag

Muneeb Mirza

128

Sie können auch verwenden:

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

Es kommt nur darauf an, welches Verhalten Sie wollen. map.panTo()schwenkt mit Zoom- / Schwenkanimation zum Ort, während map.setView()die neue Ansicht sofort auf den gewünschten Ort / die gewünschte Zoomstufe eingestellt wird.

Greg Wilson
quelle

4

Ich mag dieses, weil Sie auch die Zoomstufe erhalten, was sehr nützlich ist.

Herr Concolato

2

Sie können die Koordinaten auch als Array übergeben: map.setView([40.737, -73.923], 8)oder als Objektmap.setView({lat:40.737, lng:-73.923}, 8)

leobelizquierdo

5

panTo zeigte keine Animation, ich benutzemap.setView(latlng, map.getZoom(), { animation: true });

Ivan Ferrer Villa

7

Die Verwendung map.panTo();bewirkt nichts, wenn sich der Punkt in der aktuellen Ansicht befindet. Verwenden Sie map.setView()stattdessen.

Ich hatte eine Polylinie und musste die Karte jede Sekunde auf einen neuen Punkt in der Polylinie zentrieren. Überprüfen Sie den Code: GUT: https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

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

Stefan Nedelcu
quelle

4

Sie könnten auch verwenden:

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

Dadurch wird die Ansichtsebene so eingestellt, dass sie den Grenzen in der Kartenbroschüre entspricht.

Latinrickshaw
quelle

So ändern Sie das Kartencenter in Leaflet.js

Antworten: