ตัวอย่างต่อไปนี้แสดงวิธีสร้างแผนที่แบบโต้ตอบใน React โดยใช้ LeafletJS:
1 | import React, { useState } from "react"; |
โค้ดนี้สร้างแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร
องค์ประกอบ Map
จะใช้เพื่อสร้างแผนที่ LeafletJS องค์ประกอบ TileLayer
จะใช้เพื่อสร้างเลเยอร์แผนที่แบบเปิด องค์ประกอบ Marker
จะใช้เพื่อสร้างจุดมาร์กเกอร์บนแผนที่
ตัวแปร zoom
และ center
จะใช้เพื่อตั้งค่าค่าเริ่มต้นสำหรับแผนที่
เมื่อคุณรันโค้ดนี้ คุณจะเห็นแผนที่แบบโต้ตอบที่มีจุดมาร์กเกอร์อยู่ที่กรุงเทพมหานคร
คุณสามารถปรับแต่งแผนที่นี้ได้ตามต้องการ เช่น เปลี่ยนระดับการซูม ย้ายตำแหน่งของจุดมาร์กเกอร์ หรือเพิ่มเลเยอร์อื่นๆ
ตัวอย่างการปรับแต่งแผนที่:
- เปลี่ยนระดับการซูม:
1 | const [zoom, setZoom] = useState(16); |
- ย้ายตำแหน่งของจุดมาร์กเกอร์:
1 | const [center, setCenter] = useState([13.7577, 100.5000]); |
- เพิ่มเลเยอร์:
1 | <TileLayer url="https://{s}.mapbox.com/styles/v1/mapbox/streets-v11/tiles/256/{z}/{x}/{y}.png" /> |
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ LeafletJS ใน React จากเอกสารประกอบของ React Leaflet