วิธีเปลี่ยนศูนย์กลางแผนที่ใน Leaflet.js

111

รหัสต่อไปนี้เริ่มต้นแผนผังแผ่นพับ ฟังก์ชัน initialize จะจัดศูนย์แผนที่ตามตำแหน่งของผู้ใช้ ฉันจะเปลี่ยนศูนย์กลางของแผนที่ไปยังตำแหน่งใหม่หลังจากเรียกใช้ฟังก์ชัน initialize ได้อย่างไร

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

— โจเอลเจมส์
แหล่งที่มา

169

ตัวอย่างเช่น:

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

— Paulo Rodrigues
แหล่งที่มา

23

map.flyTo([40.737, -73.923], 8) หากคุณต้องการซูมและเคลื่อนไหวเช่นกัน

— Martin Belcher - AtWrk

4

ในกรณีของฉันอย่างไรpanTo(), flyTo(), setView()- ทั้งหมดของพวกเขาพาฉันไปที่ด้านบนซ้ายของแผนที่และไม่ศูนย์

— Mrigank Pawagi

คุณ ... พวกคุณช่วยวันของเรา

— Muneeb Mirza

128

คุณยังสามารถใช้:

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

มันขึ้นอยู่กับพฤติกรรมที่คุณต้องการ map.panTo()จะเลื่อนไปยังตำแหน่งที่มีการซูม / แพนภาพเคลื่อนไหวในขณะที่map.setView()ตั้งค่ามุมมองใหม่ไปยังตำแหน่ง / ระดับการซูมที่ต้องการทันที

— เกร็กวิลสัน
แหล่งที่มา

4

ฉันชอบอันนี้เพราะคุณได้ระดับการซูมซึ่งมีประโยชน์มาก

— Mr.Concolato

2

นอกจากนี้คุณสามารถส่งผ่านพิกัดเป็นอาร์เรย์: map.setView([40.737, -73.923], 8)หรือวัตถุmap.setView({lat:40.737, lng:-73.923}, 8)

— leobelizquierdo

5

แพนถึงไม่แสดงภาพเคลื่อนไหวฉันใช้map.setView(latlng, map.getZoom(), { animation: true });

— Ivan Ferrer Villa

7

การใช้งานmap.panTo();จะไม่ทำอะไรเลยหากจุดนั้นอยู่ในมุมมองปัจจุบัน ใช้map.setView()แทน

ฉันมีเส้นหลายเส้นและต้องตั้งศูนย์กลางแผนที่ไปยังจุดใหม่ในเส้นหลายเส้นทุกวินาที ตรวจสอบรหัส: GOOD: https://jsfiddle.net/nstudor/xcmdwfjk/

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

ไม่ดี: https://jsfiddle.net/nstudor/Lgahv905/

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

— Stefan Nedelcu
แหล่งที่มา

4

คุณยังสามารถใช้:

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

การดำเนินการนี้จะกำหนดระดับมุมมองให้พอดีกับขอบเขตในแผ่นพับแผนที่

— ละติน
แหล่งที่มา