[โค้ด] LeafletJS ระบุตำแหน่งลิงค์ไปแผนที่ LeafletJS + Google Maps | boychawin.com

[โค้ด] LeafletJS ระบุตำแหน่งลิงค์ไปแผนที่ LeafletJS + Google Maps

  • April 26, 2021 272
[โค้ด] LeafletJS  ระบุตำแหน่งลิงค์ไปแผนที่ LeafletJS + Google Maps
  • Share


มารู้จักกับ Leaflet คือ JavaScript library แบบโอเพนซอร์สที่ใช้ในการจัดการ แผนที่บนเว็บไซต์

ต่อเนื่องจาก 
"สคริปต์ ระบุตำแหน่งลิงค์ไปแผนที่และแสดงผลบนเว็บไซต์ Google Maps API & JS"

โปรเจคข้างต้นจะใช้ Google Maps ในการแสดงผลค่าพิกัดที่ดึงมา ซึ่งถ้าเราไม่ได้จ่ายตังค์ พอใช้ไปสักระยะ “For development purposes only” อาจจะมีคำนี้ขึ้นมากวนใจได้ แต่โปรเจคนี้จะใช้ LeafletJS มาช่วยในการแสดงผลค่าพิกัดแทน เพราะฟรีๆ ซึ่งผมลองใช้งานมาสักระยะก็โอเคอยู่นะ เลยเอามาแชร์กัน Code อาจจะดูหลากหลายหน่อยนะครับ ฮ่าๆ เอาไปปรับใช้งานกันนะครับ


รายละเอียด

- LeafletJS
- Google Maps API
- CSS Framework Bootstrap 5
- Jquery

คำอธิบายวิธีใช้

1. คลิกที่ ปุ่ม "ระบุตำแหน่ง"  จะมีการเรียกขอเข้าถึงตำแหน่งก่อน ให้ "อนุญาติ" 
2. ระบบจะระบุตำแหน่งปัจจุบันแล้วดึง ลองจิจูด, ละติจูด มีแสดงที่ Text Box
3. เราจึงสามารถกด ดูแผนที่ จะลิงค์พร้อมแสดงตำแหน่งเราไปที่หน้า Google Maps 
4. นำโค้ดไปปรับแต่งตามงานเราได้เลยนะครับ


ขั้นตอนการติดตั้ง

1. Copy โค้ดอยู่ด้านล่างนี้ 
2. ตั้งชื่อไฟล์ ใส่นามสกุล .HTML ก็ได้
3. รัน 

ดูตัวอย่าง Youtube




GitHub

บทความอื่นที่น่าสนใจ

ความคิดเห็น

ติดตาม Facebook

ยอดนิยมวันนี้

ยอดนิยม

เว็บเทรด Bitcoin

ช่องทางติดต่อเรา