ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผนที่แบบโต้ตอบใน Vue โดยใช้ LeafletJS:
1 | <template> |
โค้ดนี้สร้างแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร
องค์ประกอบ leaflet-map
จะใช้เพื่อสร้างแผนที่ LeafletJS องค์ประกอบ leaflet-marker
จะใช้เพื่อสร้างจุดมาร์กเกอร์บนแผนที่
ฟังก์ชัน mounted()
จะใช้เพื่อตั้งค่าค่าเริ่มต้นสำหรับแผนที่และสร้างจุดมาร์กเกอร์
เมื่อคุณรันโค้ดนี้ คุณจะเห็นแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร
คุณสามารถปรับแต่งแผนที่นี้ได้ตามต้องการ เช่น เปลี่ยนระดับการซูม ย้ายตำแหน่งของจุดมาร์กเกอร์ หรือเพิ่มเลเยอร์อื่นๆ
ตัวอย่างการปรับแต่งแผนที่:
- เปลี่ยนระดับการซูม:
this.zoom = 16;
- ย้ายตำแหน่งของจุดมาร์กเกอร์:
this.lat = 13.7577; this.lng = 100.5000;
- เพิ่มเลเยอร์:
this.map.addLayer(new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ LeafletJS ใน Vue จากเอกสารประกอบของ Vue-Leaflet