เว็บ Geolocation API
ค้นหาตำแหน่งของผู้ใช้
HTML Geolocation API ใช้เพื่อรับตำแหน่งทางภูมิศาสตร์ของผู้ใช้
เนื่องจากสิ่งนี้สามารถประนีประนอมความเป็นส่วนตัว ตำแหน่งจึงไม่สามารถใช้ได้เว้นแต่ผู้ใช้จะอนุมัติ
หมายเหตุ: การระบุตำแหน่งทางภูมิศาสตร์นั้นแม่นยำที่สุดสำหรับอุปกรณ์ที่มี GPS เช่น สมาร์ทโฟน
Geolocation API รองรับในทุกเบราว์เซอร์:
| Yes | Yes | Yes | Yes | Yes |
หมายเหตุ:ตั้งแต่ Chrome 50 เป็นต้นไป Geolocation API จะทำงานบนบริบทที่ปลอดภัย เช่น HTTPS เท่านั้น หากไซต์ของคุณโฮสต์บนต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอรับตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป
การใช้ Geolocation API
วิธี การ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>
ตัวอย่างอธิบาย:
- ตรวจสอบว่ารองรับตำแหน่งทางภูมิศาสตร์หรือไม่
- หากได้รับการสนับสนุน ให้เรียกใช้เมธอด getCurrentPosition() ถ้าไม่แสดงข้อความถึงผู้ใช้
- หากเมธอด getCurrentPosition() สำเร็จ มันจะส่งคืนอ็อบเจ็กต์พิกัดไปยังฟังก์ชันที่ระบุในพารามิเตอร์ (showPosition)
- ฟังก์ชัน showPosition() จะแสดงค่าละติจูดและลองจิจูด
ตัวอย่างข้างต้นเป็นสคริปต์ตำแหน่งทางภูมิศาสตร์พื้นฐาน โดยไม่มีข้อผิดพลาดในการจัดการ
การจัดการข้อผิดพลาดและการปฏิเสธ
พารามิเตอร์ที่สองของgetCurrentPosition()วิธีการนี้ใช้เพื่อจัดการกับข้อผิดพลาด ระบุฟังก์ชันที่จะเรียกใช้หากไม่สามารถรับตำแหน่งของผู้ใช้ได้:
ตัวอย่าง
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
แสดงผลในแผนที่
หากต้องการแสดงผลลัพธ์ในแผนที่ คุณต้องเข้าถึงบริการแผนที่ เช่น Google Maps
ในตัวอย่างด้านล่าง ละติจูดและลองจิจูดที่ส่งคืนถูกใช้เพื่อแสดงตำแหน่งใน Google Map (โดยใช้ภาพนิ่ง):
ตัวอย่าง
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
ข้อมูลเฉพาะสถานที่
หน้านี้แสดงวิธีแสดงตำแหน่งของผู้ใช้บนแผนที่
ตำแหน่งทางภูมิศาสตร์ยังมีประโยชน์มากสำหรับข้อมูลเฉพาะตำแหน่ง เช่น:
- ข้อมูลท้องถิ่นที่ทันสมัย
- แสดงจุดที่น่าสนใจใกล้ผู้ใช้
- การนำทางแบบเลี้ยวต่อเลี้ยว (GPS)
เมธอด getCurrentPosition() - ส่งคืน Data
วิธี การgetCurrentPosition()ส่งคืนวัตถุเมื่อสำเร็จ คุณสมบัติละติจูด ลองจิจูด และความแม่นยำจะถูกส่งกลับเสมอ คุณสมบัติอื่น ๆ จะถูกส่งคืนหากมี:
| Property | Returns |
|---|---|
| coords.latitude | The latitude as a decimal number (always returned) |
| coords.longitude | The longitude as a decimal number (always returned) |
| coords.accuracy | The accuracy of position (always returned) |
| coords.altitude | The altitude in meters above the mean sea level (returned if available) |
| coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
| coords.heading | The heading as degrees clockwise from North (returned if available) |
| coords.speed | The speed in meters per second (returned if available) |
| timestamp | The date/time of the response (returned if available) |
Geolocation Object - วิธีการที่น่าสนใจอื่น ๆ
วัตถุ Geolocation ยังมีวิธีการอื่นๆ ที่น่าสนใจอีกด้วย:
watchPosition()- ส่งคืนตำแหน่งปัจจุบันของผู้ใช้และยังคงส่งคืนตำแหน่งที่อัปเดตเมื่อผู้ใช้เคลื่อนที่ (เช่น GPS ในรถยนต์)clearWatch()- หยุดwatchPosition()วิธีการ
ตัวอย่างด้านล่างแสดงwatchPosition()วิธีการ คุณต้องมีอุปกรณ์ GPS ที่แม่นยำเพื่อทดสอบสิ่งนี้ (เช่นสมาร์ทโฟน):
ตัวอย่าง
<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>