Cách thay đổi trung tâm bản đồ trong Leaflet.js

111

Đoạn mã sau đây khởi tạo một bản đồ tờ rơi. Chức năng khởi tạo căn giữa bản đồ dựa trên vị trí của người dùng. Làm cách nào để thay đổi tâm bản đồ sang vị trí mới sau khi gọi hàm khởi tạo?

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
nguồn

169

Ví dụ:

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

— Paulo Rodrigues
nguồn

23

map.flyTo([40.737, -73.923], 8) nếu bạn muốn phóng to và Animate cũng

— Martin Belcher - AtWrk

4

Trong trường hợp của tôi tuy nhiên, panTo(), flyTo(), setView()- tất cả trong số họ đưa tôi đến trên bên trái của bản đồ, và không phải là trung tâm.

— Mrigank Pawagi

các bạn ... các bạn đã cứu lấy ngày của chúng ta

— Muneeb Mirza

128

Bạn cũng có thể dùng:

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

Nó chỉ phụ thuộc vào hành vi bạn muốn. map.panTo()sẽ xoay đến vị trí có hoạt ảnh thu phóng / xoay, trong khi map.setView()đặt ngay chế độ xem mới ở vị trí / mức thu phóng mong muốn.

— Greg Wilson
nguồn

4

Tôi thích cái này vì bạn cũng có được mức thu phóng, rất hữu ích.

— Ông Concolato

2

Ngoài ra bạn có thể vượt qua các tọa độ như một mảng: map.setView([40.737, -73.923], 8)hoặc một đối tượngmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

panto đã không hiển thị hình ảnh động, tôi sử dụngmap.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

Sử dụng map.panTo();không làm bất cứ điều gì nếu điểm ở trong dạng xem hiện tại. Sử dụng map.setView()thay thế.

Tôi có một polyline và tôi phải căn giữa bản đồ đến một điểm mới trong polyline mỗi giây. Kiểm tra mã: TỐT: https://jsfiddle.net/nstudor/xcmdwfjk/

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

XẤU: https://jsfiddle.net/nstudor/Lgahv905/

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

— Stefan Nedelcu
nguồn

4

Bạn cũng có thể sử dụng:

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

Điều này sẽ đặt mức độ xem để phù hợp với giới hạn trong tờ rơi bản đồ.

— Xe kéo Latin
nguồn