เริ่มต้นใช้งานกับ LeafletJS

LeafletJS

Created At : 2023-09-19 01:16

Views 👀 :

เพื่อเริ่มต้นใช้งานกับ LeafletJS คุณจะต้องติดตั้ง LeafletJS ลงในเว็บไซต์ของคุณ สามารถทำได้โดยดาวน์โหลดไฟล์ JavaScript จากเว็บไซต์ของ LeafletJS หรือใช้ CDN

เมื่อคุณติดตั้ง LeafletJS เรียบร้อยแล้ว คุณสามารถสร้างแผนที่ได้โดยใช้ HTML, CSS และ JavaScript ต่อไปนี้

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LeafletJS Example</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    // Create a map
    var map = L.map('map', {
      center: [51.505, -0.09],
      zoom: 13
    });

    // Add a tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  </script>
</body>
</html>

โค้ดนี้จะสร้างแผนที่แบบโต้ตอบที่แสดงแผนที่โลก คุณสามารถปรับแต่งแผนที่ได้ตามต้องการ เช่น เปลี่ยนตำแหน่งของแผนที่ ระยะการซูม หรือประเภทของแผนที่ที่แสดง

สำหรับตัวอย่างเพิ่มเติมเกี่ยวกับการใช้งาน LeafletJS คุณสามารถดูได้ที่เว็บไซต์ของ LeafletJS หรือในตัวอย่างการใช้งานบน GitHub

ต่อไปนี้เป็นขั้นตอนเริ่มต้นใช้งานกับ LeafletJS

ติดตั้ง LeafletJS
สร้าง HTML, CSS และ JavaScript สำหรับแผนที่ของคุณ
ปรับแต่งแผนที่ของคุณตามต้องการ

ต่อไปนี้เป็นแนวคิดบางประการสำหรับการสร้างแอปพลิเคชันทำแผนที่ด้วย LeafletJS

แอปพลิเคชันแสดงแผนที่ทั่วไป
แอปพลิเคชันแสดงข้อมูลภูมิศาสตร์
แอปพลิเคชันติดตามตำแหน่ง
แอปพลิเคชันการนำทาง
แอปพลิเคชันเกม

หากคุณต้องการสร้างแอปพลิเคชันทำแผนที่ด้วย JavaScript LeafletJS เป็นตัวเลือกที่น่าสนใจ เนื่องจากมีขนาดไฟล์ขนาดเล็ก ใช้งานง่าย และรองรับแพลตฟอร์มหลากหลาย