คุณสมบัติ position ของ Geolocation ใน HTML DOM

คุณสมบัติ position ของ Geolocation ใน HTML DOM ใช้สำหรับดึงตำแหน่งและระดับความสูงของอุปกรณ์ผู้ใช้บนโลก ผู้ใช้ต้องให้อนุญาตก่อนถึงจะทำงานได้ เพื่อปกป้องความเป็นส่วนตัว สามารถนำไปใช้ติดตามตำแหน่งอุปกรณ์ต่างๆ

คุณสมบัติ (Properties)

หมายเหตุ: คุณสมบัติด้านล่างเป็นแบบอ่านอย่างเดียว (read-only)

ไวยากรณ์ (Syntax)

position.property

property เป็นหนึ่งในสองคุณสมบัติในตารางข้างต้น

ตัวอย่าง

ตัวอย่างการดึงพิกัดตำแหน่งผู้ใช้:

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติพิกัด Geolocation</h1>
<p>คลิกปุ่มด้านล่างเพื่อดูพิกัดของคุณ</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">Your coordinates are:</p>
<script>
  var p = document.getElementById("Sample");
  
  function getCoords() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showCoords);
    } else {
      p.innerHTML = "เบราว์เซอร์นี้ไม่รองรับ Geolocation";
    }
  }
  
  function showCoords(position) {
    p.innerHTML = "Longitude: " + position.coords.longitude + 
      "<br>Latitude: " + position.coords.latitude + 
      "<br>Accuracy: " + position.coords.accuracy;
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บจะแสดงปุ่ม "COORDINATES"

เมื่อคลิกปุ่ม เบราว์เซอร์จะขออนุญาตเข้าถึงตำแหน่ง หากอนุญาต จะแสดง Longitude, Latitude, และ Accuracy

คำอธิบายโค้ด

• สร้างปุ่ม "COORDINATES" เรียกใช้ getCoords() เมื่อคลิก
• getCoords() ตรวจสอบ navigator.geolocation หากรองรับ เรียก getCurrentPosition(showCoords) ซึ่งเป็น callback function
• showCoords(position) รับอินเทอร์เฟซ position แล้วแสดง position.coords.longitude, latitude, accuracy ในย่อหน้า id="Sample"
• หากเบราว์เซอร์ไม่รองรับ จะแสดงข้อความแจ้งเตือน