HTML Geolocation API

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

Geolocation (การระบุตำแหน่งทางภูมิศาสตร์) API ใช้สำหรับระบุตำแหน่งของผู้ใช้

ระบุตำแหน่งของผู้ใช้งาน

ใช้ HTML Geolocation API เพื่อรับตำแหน่งทางภูมิศาสตร์ของผู้ใช้

เนื่องจากการทำเช่นนี้อาจส่งผลกระทบต่อความเป็นส่วนตัว จึงไม่สามารถระบุตำแหน่งได้หากผู้ใช้ไม่ยินยอม

หมายเหตุ: ตั้งแต่ Chrome version 50 เป็นต้นไป Geolocation API จะทำงานได้เฉพาะในบริบทที่ปลอดภัย เช่น HTTPS เท่านั้น หากไซต์ของคุณมีโฮสต์บนแหล่งที่มาที่ไม่ปลอดภัย (เช่น HTTP) คำขอเพื่อขอตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป

ใช้ Geolocation

ใช้วิธี getCurrentPosition() เพื่อส่งคืนตำแหน่งของผู้ใช้

ตัวอย่าง การส่งคืนค่ะละติจูดและค่าลองจิจูด

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation</h1>
<p>คลิกปุ่มเพื่อรับพิกัดของคุณ</p>

<button onclick="getLocation()">รับพิกัด</button>

<p id="demo"></p>

<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>

</body>
</html>
ลองดูสิ ❱

อธิบายตัวอย่างข้างต้น

  • ตรวจสอบว่าเบราว์เซอร์รองรับ Geolocation หรือไม่
  • หากรองรับ ให้เรียกใช้ Method getCurrentPosition() แต่หากไม่รองรับ ให้แสดงข้อความให้ผู้ใช้ทราบ
  • หาก Method getCurrentPosition() สามารถใช้งานได้ จะส่งคืนค่าพิกัดที่เป็น Object ไปยังฟังก์ชัน showPosition ที่ระบุไว้ในพารามิเตอร์ตำแหน่งที่ 1
  • ฟังก์ชัน showPosition() จะแสดงค่าละติจูดและค่าลองจิจูด
  • ตัวอย่างด้านบนเป็นสคริปต์ระบุตำแหน่งทางภูมิศาสตร์พื้นฐานมาก โดยไม่มีการจัดการข้อผิดพลาด

การจัดการข้อผิดพลาด (Errors) และการปฏิเสธ (Rejections)

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

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation</h1>
<p>คลิกปุ่มเพื่อรับพิกัดของคุณ</p>

<button onclick="getLocation()">รับพิกัด</button>

<p id="demo"></p>

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

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

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

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;
  }
}
</script>

</body>
</html>
ลองดูสิ ❱

ข้อมูล Location-specific

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

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

getCurrentPosition() Method – ส่งคืนข้อมูล

getCurrentPosition() Method จะส่งคืนค่าเมื่อทำงานสำเร็จ คุณสมบัติละติจูด ลองจิจูด และความแม่นยำจะถูกส่งคืนเสมอ ส่วนคุณสมบัติอื่นๆ จะถูกส่งคืน เมื่อมีค่าอยู่

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

Geolocation Object – วิธีอื่นๆ ที่น่าสนใจ

Object ของ Geolocation ยังมีวิธีที่น่าสนใจอื่นๆ อีกด้วย

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

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation</h1>
<p>คลิกปุ่มเพื่อรับพิกัดของคุณ</p>

<button onclick="getLocation()">รับพิกัด</button>

<p id="demo"></p>

<script>
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;
}
</script>

</body>
</html>
ลองดูสิ ❱
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯