ตัวอย่าง leafletjs ใน vue

ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผนที่แบบโต้ตอบใน Vue โดยใช้ LeafletJS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<div id="map">
<leaflet-map :zoom="zoom" :center="center">
<leaflet-marker :lat="lat" :lng="lng"></leaflet-marker>
</leaflet-map>
</div>
</template>

<script>
import Vue from "vue";
import Leaflet from "vue-leaflet";

export default {
name: "App",
components: {
LeafletMap: Leaflet.Map,
LeafletMarker: Leaflet.Marker,
},
data() {
return {
zoom: 12,
center: [13.7577, 100.5000],
lat: 13.7577,
lng: 100.5000,
};
},
mounted() {
this.map = this.$refs.map;
this.marker = new L.Marker([this.lat, this.lng]);
this.map.addLayer(this.marker);
},
};
</script>

โค้ดนี้สร้างแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร

องค์ประกอบ 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