คุณสมบัติ HTML DOM Geolocation coordinates

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

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

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

ลำดับ	คุณสมบัติและคำอธิบาย
1	coordinates.latitude คืนค่าละติจูดของตำแหน่งอุปกรณ์ในองศาทศนิยม
2	coordinates.longitude คืนค่าลองจิจูดของตำแหน่งอุปกรณ์ในองศาทศนิยม
3	coordinates.altitude คืนค่าระดับความสูงของตำแหน่งในเมตร เทียบกับระดับน้ำทะเล อาจคืนค่า null หากอุปกรณ์ไม่มี GPS
4	coordinates.accuracy คืนค่าความแม่นยำของ latitude และ longitude ในหน่วยเมตร
5	coordinates.altitudeAccuracy คืนค่าความแม่นยำของคุณสมบัติ altitude ในหน่วยเมตร
6	coordinates.heading คืนค่าทิศทางที่อุปกรณ์กำลังเคลื่อนที่ หน่วยเป็นองศา 0 องศา = ทิศเหนือ แสดงทิศทางตามเข็มนาฬิกา (ตะวันออก 90 องศา ตะวันตก 270 องศา) หาก speed เป็น 0 จะเป็น NaN หากอุปกรณ์ไม่รองรับ จะเป็น null
7	coordinates.speed คืนค่าความเร็วของอุปกรณ์ในเมตรต่อวินาที อาจเป็น null

ไวยากรณ์ (Syntax)

coordinates.property

"property" สามารถเป็นคุณสมบัติใดก็ได้จากตารางข้างต้น

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <body> 
<h1>Geolocation coordinates property</h1> 
<p>Get you coordinates by clicking the below button</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 ="This browser doesn't support geolocation."; 
    } 
  } 
  function showCoords(position) { 
    p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy; 
  } 
</script> </body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

คุณสมบัติ HTML DOM Geolocation coordinates

เมื่อคลิกปุ่ม COORDINATES และกด Allow บน popup "Know your location":

คุณสมบัติ HTML DOM Geolocation coordinates

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

เราสร้างปุ่ม COORDINATES ที่จะทำงานฟังก์ชัน getCoords() เมื่อคลิก:

<button onclick="getCoords()">COORDINATES</button>

ฟังก์ชัน getCoords() ตรวจสอบ navigator.geolocation ว่าเบราว์เซอร์รองรับหรือไม่ หากรองรับ จะคืนค่า Geolocation object ใช้เมธอด getCurrentPosition() เพื่อรับตำแหน่งปัจจุบันของอุปกรณ์ เมธอดนี้เป็น callback function รับฟังก์ชันเป็นพารามิเตอร์

เราส่งเมธอด showCoords() ไป ซึ่งรับ position interface เป็นพารามิเตอร์ และใช้แสดง longitude, latitude, accuracy ในพารากราฟ id "Sample" โดยใช้ innerHTML:

function getCoords() { 
  if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(showCoords); 
  } else { 
    p.innerHTML ="This browser doesn't support geolocation."; 
  } 
} 
function showCoords(position) { 
  p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy; 
}