พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Geolocation API

Geolocation API ใน HTML5 ช่วยให้เราสามารถดึงพิกัดตำแหน่งของผู้ใช้ (เช่น ละติจูดและลองจิจูด) มาใช้งานในเว็บไซต์หรือเว็บแอปพลิเคชันได้ โดยไม่จำเป็นต้องติดตั้งปลั๊กอินเสริม โดยข้อมูลตำแหน่งนี้สามารถนำไปใช้ในหลายสถานการณ์ เช่น ระบบนำทาง, การแสดงผลตำแหน่งบนแผนที่, หรือการแสดงข้อมูลที่เกี่ยวข้องกับตำแหน่งของผู้ใช้

การใช้งาน Geolocation API

การใช้งาน Geolocation API ต้องมีการร้องขอสิทธิ์จากผู้ใช้เสียก่อน ผ่านฟังก์ชันหลัก 3 ฟังก์ชัน คือ

  1. getCurrentPosition(): ดึงตำแหน่งปัจจุบันของผู้ใช้
  2. watchPosition(): ติดตามการเปลี่ยนแปลงตำแหน่งของผู้ใช้
  3. clearWatch(): ยกเลิกการติดตามตำแหน่ง

ตัวอย่างการใช้งานแต่ละรูปแบบ

getCurrentPosition()

ใช้เพื่อดึงพิกัดตำแหน่งปัจจุบันของผู้ใช้ โดยโค้ดนี้จะทำการร้องขอสิทธิ์จากผู้ใช้เพื่อรับข้อมูลตำแหน่ง

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Geolocation Example</title>
</head>
<body>
  <h2>Geolocation - Get Current Position</h2>
  <button onclick="getLocation()">Get Location</button>
  <p id="location"></p>

  <script>
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else {
        document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
      document.getElementById("location").innerHTML = 
        "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
    }

    function showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          document.getElementById("location").innerHTML = "User denied the request for Geolocation.";
          break;
        case error.POSITION_UNAVAILABLE:
          document.getElementById("location").innerHTML = "Location information is unavailable.";
          break;
        case error.TIMEOUT:
          document.getElementById("location").innerHTML = "The request to get user location timed out.";
          break;
        case error.UNKNOWN_ERROR:
          document.getElementById("location").innerHTML = "An unknown error occurred.";
          break;
      }
    }
  </script>
</body>
</html>
  • เมื่อผู้ใช้กดปุ่ม Get Location ฟังก์ชัน getCurrentPosition() จะถูกเรียกใช้เพื่อตรวจสอบตำแหน่งปัจจุบัน
  • พิกัดตำแหน่งจะถูกแสดงที่ Latitude และ Longitude

watchPosition()

ใช้เพื่อติดตามตำแหน่งของผู้ใช้ในขณะที่ผู้ใช้อยู่ในระหว่างการเคลื่อนที่

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Geolocation WatchPosition</title>
</head>
<body>
  <h2>Geolocation - Watch Position</h2>
  <button onclick="startTracking()">Start Tracking</button>
  <button onclick="stopTracking()">Stop Tracking</button>
  <p id="location"></p>

  <script>
    var watchID;

    function startTracking() {
      if (navigator.geolocation) {
        watchID = navigator.geolocation.watchPosition(showPosition, showError);
      } else {
        document.getElementById("location").innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function stopTracking() {
      if (watchID) {
        navigator.geolocation.clearWatch(watchID);
        document.getElementById("location").innerHTML = "Tracking stopped.";
      }
    }

    function showPosition(position) {
      document.getElementById("location").innerHTML = 
        "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;
    }

    function showError(error) {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          document.getElementById("location").innerHTML = "User denied the request for Geolocation.";
          break;
        case error.POSITION_UNAVAILABLE:
          document.getElementById("location").innerHTML = "Location information is unavailable.";
          break;
        case error.TIMEOUT:
          document.getElementById("location").innerHTML = "The request to get user location timed out.";
          break;
        case error.UNKNOWN_ERROR:
          document.getElementById("location").innerHTML = "An unknown error occurred.";
          break;
      }
    }
  </script>
</body>
</html>
  • เมื่อกดปุ่ม Start Tracking ฟังก์ชัน watchPosition() จะเริ่มติดตามตำแหน่งของผู้ใช้และแสดงผลการอัปเดตทุกครั้งที่ตำแหน่งเปลี่ยน
  • หากต้องการหยุดการติดตาม กดปุ่ม Stop Tracking ซึ่งจะเรียกใช้ฟังก์ชัน clearWatch() เพื่อล้างการติดตามตำแหน่ง

การประยุกต์ใช้ Geolocation API

1. การแสดงตำแหน่งผู้ใช้บนแผนที่: เราสามารถใช้ Geolocation API ร่วมกับ Google Maps API หรือแผนที่อื่น ๆ เพื่อแสดงตำแหน่งของผู้ใช้บนแผนที่

2. การค้นหาสถานที่ใกล้เคียง: เมื่อได้พิกัดของผู้ใช้แล้ว เราสามารถนำไปใช้ในการค้นหาสถานที่ใกล้เคียง เช่น ร้านอาหาร ปั๊มน้ำมัน หรือสถานที่สำคัญอื่น ๆ

3. การแนะนำเส้นทาง: Geolocation API สามารถใช้ร่วมกับระบบนำทาง (navigation) เพื่อบอกเส้นทางจากตำแหน่งของผู้ใช้ไปยังจุดหมาย

สรุป

Geolocation API ใน HTML5 เป็นเครื่องมือที่มีประโยชน์และง่ายในการใช้งานสำหรับการทำงานที่เกี่ยวข้องกับตำแหน่งของผู้ใช้ และสามารถประยุกต์ใช้ในแอปพลิเคชันต่าง ๆ ทั้งด้านการนำทาง การแสดงผลตำแหน่ง หรือการค้นหาข้อมูลที่เกี่ยวข้องกับตำแหน่ง

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ