Bagaimana mengubah pusat peta di Leaflet.js

111

Kode berikut menginisialisasi peta selebaran. Fungsi inisialisasi memusatkan peta berdasarkan lokasi pengguna. Bagaimana cara mengubah pusat peta ke posisi baru setelah memanggil fungsi inisialisasi?

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
sumber

Jawaban:

169

Sebagai contoh:

map.panTo(new L.LatLng(40.737, -73.923));
Paulo Rodrigues
sumber
23
map.flyTo([40.737, -73.923], 8) jika Anda ingin memperbesar dan menganimasikan juga
Martin Belcher - AtWrk
4
Dalam kasus saya Namun, panTo(), flyTo(), setView()- semua dari mereka membawa saya ke kiri atas peta, dan tidak pusat.
Mrigank Pawagi
kalian ... kalian selamatkan hari kami
Muneeb Mirza
128

Anda juga bisa menggunakan:

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

Itu tergantung pada perilaku apa yang Anda inginkan. map.panTo()akan menggeser ke lokasi dengan animasi zoom / pan, sementara map.setView()segera mengatur tampilan baru ke lokasi / tingkat zoom yang diinginkan.

Greg Wilson
sumber
4
Saya suka yang ini karena Anda juga mendapatkan level zoom, yang sangat berguna.
Tn. Concolato
2
Anda juga dapat meneruskan koordinat sebagai array: map.setView([40.737, -73.923], 8)atau objekmap.setView({lat:40.737, lng:-73.923}, 8)
leobelizquierdo
5
panTo tidak menampilkan animasi, saya menggunakanmap.setView(latlng, map.getZoom(), { animation: true });
Ivan Ferrer Villa
7

Penggunaan map.panTo();tidak melakukan apa pun jika titik tersebut ada di tampilan saat ini. Gunakan map.setView()sebagai gantinya.

Saya memiliki polyline dan saya harus memetakan ke titik tengah baru di polyline setiap detik. Cek kodenya: BAIK: https://jsfiddle.net/nstudor/xcmdwfjk/

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

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

mymap.panTo(point);
mymap.setZoom(11);
Stefan Nedelcu
sumber
4

Anda juga bisa menggunakan:

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

Ini akan menyetel tingkat tampilan agar sesuai dengan batas di selebaran peta.

Latinrickshaw
sumber