Leaflet.js'de harita merkezi nasıl değiştirilir

111

Aşağıdaki kod bir broşür haritasını başlatır. Başlatma işlevi haritayı kullanıcı konumuna göre ortalar. Başlatma işlevini çağırdıktan sonra haritanın merkezini yeni bir konuma nasıl değiştirebilirim?

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
kaynak

169

Örneğin:

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

— Paulo Rodrigues
kaynak

23

map.flyTo([40.737, -73.923], 8) aynı zamanda yakınlaştırmak ve canlandırmak istiyorsanız

— Martin Belcher - AtWrk

4

Benim durumumda ise panTo(), flyTo(), setView()- hepsi götür sol üst haritanın değil, merkeze.

— Mrigank Pawagi

siz ... sizler bizim günümüzü kurtarıyorsunuz

— Muneeb Mirza

128

Ayrıca kullanabilirsiniz:

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

Bu sadece ne tür davranış istediğine bağlı. yeni görünümü hemen istenen konuma / yakınlaştırma düzeyine ayarlarken map.panTo()yakınlaştırma / kaydırma animasyonuyla map.setView()konuma kaydırır.

— Greg Wilson
kaynak

4

Bunu beğendim çünkü aynı zamanda çok kullanışlı olan yakınlaştırma seviyesini de alıyorsunuz.

— Bay Concolato

2

Ayrıca koordinatları bir dizi olarak map.setView([40.737, -73.923], 8)veya bir nesne olarak da iletebilirsinizmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panTo animasyon göstermiyordu, kullandımmap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

map.panTo();Nokta mevcut görünümde ise kullanım hiçbir şey yapmaz. map.setView()Bunun yerine kullanın .

Bir çoklu çizgim vardı ve haritayı her saniye çoklu çizgide yeni bir noktaya ortalamak zorunda kaldım. Kodu kontrol edin: İYİ: https://jsfiddle.net/nstudor/xcmdwfjk/

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

KÖTÜ: https://jsfiddle.net/nstudor/Lgahv905/

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

— Stefan Nedelcu
kaynak

4

Ayrıca şunları da kullanabilirsiniz:

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

Bu, görünüm düzeyini harita broşüründeki sınırlara uyacak şekilde ayarlayacaktır.

— Latinrickshaw
kaynak