So ändern Sie die Kartenmitte in Leaflet.js

Lesezeit: 2 Minuten

Joel James

Der folgende Code initialisiert eine Leaflet-Map. Die Initialisierungsfunktion zentriert die Karte basierend auf dem Standort des Benutzers. Wie ändere ich die Mitte der Karte auf eine neue Position, nachdem ich die Initialisierungsfunktion aufgerufen habe?

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

Zum Beispiel:

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

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

– Martin Belcher – AtWrk

10. Dezember 2018 um 15:51 Uhr
In meinem Fall jedoch panTo(), flyTo(), setView() – Alle bringen mich zum oben links der Karte und nicht in der Mitte.

– Mrigank Pawagi

27. April 2019 um 12:42 Uhr
@MrigankPawagi verwenden setTimeout(function () {map.invalidateSize(true)}, 100);

– Jasom Dotnet

18. März um 12:59 Uhr

Gregor Wilson

Sie können auch verwenden:

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

Es hängt nur davon ab, welches Verhalten Sie wollen. map.panTo() schwenkt mit Zoom/Schwenk-Animation zur Position, während map.setView() Stellen Sie die neue Ansicht sofort auf die gewünschte Position/Zoomstufe ein.

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

– Herr Concolato

16. Oktober 2014 um 18:12 Uhr
Sie können die Koordinaten auch als Array übergeben: map.setView([40.737, -73.923], 8) oder ein Objekt map.setView({lat:40.737, lng:-73.923}, 8)

– Leobelizquierdo

11. Februar 2016 um 17:48 Uhr
panTo zeigte keine Animation, die ich verwende map.setView(latlng, map.getZoom(), { animation: true });

– Ivan Ferrer-Villa

24. Januar 2017 um 15:49 Uhr
Animation funktioniert immer noch nicht mit setView

– Chovy

1. Mai um 14:03 Uhr

Stefan Nedelku

Verwenden map.panTo(); führt nichts aus, wenn sich der Punkt in der aktuellen Ansicht befindet. Verwenden 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);

Animiert mich nicht.

– Chovy

1. Mai um 14:02 Uhr

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 zu den Grenzen im Kartenblatt passt.

Ich suchte nach einer Möglichkeit, die Grenzen zu ändern, aber ohne die Animation. Das hat bei mir funktioniert:

var bounds = L.latLng(40.737, -73.923).toBounds();
map.fitBounds(bounds, {animation: false});

Jasom Dotnet

Bei Kartenzentrierungsproblem trotz Nutzung panTo(),flyTo() oder setView() versuchen Sie, die Karte mit anzupassen map.invalidateSize():

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

jQuery-Beispiel:

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

12650400cookie-checkSo ändern Sie die Kartenmitte in Leaflet.js

#Flugblatt #Javascript