HTML Geolocation API

Geolocation API คืออะไร

Geolocation API ใช้เพื่อเข้าถึงตำแหน่งปัจจุบันของผู้ใช้

เนื่องจากการเข้าถึงตำแหน่งอาจกระทบต่อ ความเป็นส่วนตัว (Privacy)
ดังนั้นเบราว์เซอร์จะไม่ให้ข้อมูลตำแหน่ง เว้นแต่ผู้ใช้จะอนุญาตก่อน

⚠️ หมายเหตุ Geolocation API สามารถใช้งานได้เฉพาะบนเว็บไซต์ที่มีความปลอดภัย เช่น HTTPS และจะทำงานได้อย่างแม่นยำที่สุดบนอุปกรณ์ที่มี GPS เช่น สมาร์ตโฟนหรือสมาร์ตวอทช์

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

สามารถเข้าถึง Geolocation API ได้โดยใช้คำสั่ง:
navigator.geolocation

เมื่อเรียกใช้งาน เบราว์เซอร์จะ ขออนุญาตจากผู้ใช้ เพื่อเข้าถึงข้อมูลตำแหน่ง หากผู้ใช้ยินยอม เบราว์เซอร์จะใช้วิธีที่ดีที่สุดจากอุปกรณ์ (เช่น GPS หรือ Wi-Fi) เพื่อหาตำแหน่ง

getCurrentPosition() ใช้สำหรับส่งคืนตำแหน่งปัจจุบันของผู้ใช้

ตัวอย่าง: แสดงละติจูดและลองจิจูดของผู้ใช้

				
					<script>
const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

คำอธิบายตัวอย่าง

ตรวจสอบว่าเบราว์เซอร์รองรับ Geolocation หรือไม่
ถ้ารองรับ ให้เรียกใช้ getCurrentPosition()
ถ้าไม่รองรับ ให้แสดงข้อความเตือนผู้ใช้
ฟังก์ชัน success() แสดงตำแหน่งผู้ใช้ (ละติจูดและลองจิจูด)
ฟังก์ชัน error() จะแจ้งเตือนเมื่อเกิดข้อผิดพลาด

การจัดการข้อผิดพลาด (Error Handling)

พารามิเตอร์ลำดับที่ 2 ของ getCurrentPosition() ใช้สำหรับจัดการข้อผิดพลาด โดยจะระบุฟังก์ชันที่จะทำงาน เมื่อไม่สามารถรับตำแหน่งได้

ตัวอย่าง: การจัดการข้อผิดพลาดแบบละเอียด

				
					function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "ผู้ใช้ปฏิเสธการร้องขอการระบุตำแหน่งทางภูมิศาสตร์"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "ยังไม่มีข้อมูลตำแหน่งที่ตั้ง"
      break;
    case error.TIMEOUT:
      x.innerHTML = "การร้องขอเพื่อรับตำแหน่งของผู้ใช้หมดเวลาแล้ว"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "เกิดข้อผิดพลาดที่ไม่ทราบสาเหตุ"
      break;
  }
}

ข้อมูลที่ระบุด้วยตำแหน่ง (Location-specific Information)

Geolocation มีประโยชน์อย่างมากสำหรับการให้ข้อมูลที่อิงกับตำแหน่ง เช่น:

ข้อมูลท้องถิ่นล่าสุด
แสดงจุดที่น่าสนใจใกล้ผู้ใช้ (Point of Interest)
การนำทางแบบทีละขั้นตอน (GPS)

ข้อมูลที่ได้จาก `getCurrentPosition()`

เมื่อทำงานสำเร็จ getCurrentPosition()
จะส่งคืน Object ซึ่งประกอบด้วยคุณสมบัติดังนี้:

Property	ค่าที่ส่งคืน	คำอธิบาย
`coords.latitude`	ส่งคืนเสมอ	ละติจูด (ค่าทศนิยม)
`coords.longitude`	ส่งคืนเสมอ	ลองจิจูด (ค่าทศนิยม)
`coords.accuracy`	ส่งคืนเสมอ	ความแม่นยำของตำแหน่ง
`coords.altitude`	ถ้ามี	ความสูงจากระดับน้ำทะเล (เมตร)
`coords.altitudeAccuracy`	ถ้ามี	ความแม่นยำของค่าความสูง
`coords.heading`	ถ้ามี	ทิศทาง (องศาจากทิศเหนือ)
`coords.speed`	ถ้ามี	ความเร็ว (เมตรต่อวินาที)
`timestamp`	ถ้ามี	วันและเวลาที่ได้ข้อมูล

คำสั่งอื่น ๆ ของ Geolocation Object

Object ของ Geolocation ยังมีคำสั่งที่ใช้งานได้อีก เช่น:

watchPosition() ใช้เพื่อติดตามตำแหน่งปัจจุบันของผู้ใช้แบบเรียลไทม์ (เช่น ระบบ GPS ในรถยนต์)
clearWatch() ใช้เพื่อหยุดการติดตามที่เริ่มจาก watchPosition()

				
					const x = document.getElementById("demo");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
function showPosition(position) {
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
}