HTML Geolocation API
HTML Geolocation API ใช้เพื่อค้นหาตำแหน่งของผู้ใช้
ค้นหาตำแหน่งของผู้ใช้
HTML Geolocation API ใช้เพื่อรับตำแหน่งทางภูมิศาสตร์ของผู้ใช้
เนื่องจากสิ่งนี้สามารถประนีประนอมความเป็นส่วนตัว ตำแหน่งจึงไม่สามารถใช้ได้เว้นแต่ผู้ใช้จะอนุมัติ
หมายเหตุ: การระบุตำแหน่งทางภูมิศาสตร์นั้นแม่นยำที่สุดสำหรับอุปกรณ์ที่มี GPS เช่น สมาร์ทโฟน
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับตำแหน่งทางภูมิศาสตร์อย่างสมบูรณ์
API | |||||
---|---|---|---|---|---|
Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
หมายเหตุ:ตั้งแต่ Chrome 50 เป็นต้นไป Geolocation API จะทำงานบนบริบทที่ปลอดภัย เช่น HTTPS เท่านั้น หากไซต์ของคุณโฮสต์บนต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอรับตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป
ใช้ HTML Geolocation
วิธี การgetCurrentPosition()
นี้ใช้เพื่อคืนตำแหน่งของผู้ใช้
ตัวอย่างด้านล่างจะคืนค่าละติจูดและลองจิจูดของตำแหน่งผู้ใช้:
ตัวอย่าง
<script>
var 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;
}
}
ข้อมูลเฉพาะสถานที่
หน้านี้แสดงวิธีแสดงตำแหน่งของผู้ใช้บนแผนที่
ตำแหน่งทางภูมิศาสตร์ยังมีประโยชน์มากสำหรับข้อมูลเฉพาะตำแหน่ง เช่น:
- ข้อมูลท้องถิ่นที่ทันสมัย
- แสดงจุดที่น่าสนใจใกล้ผู้ใช้
- การนำทางแบบเลี้ยวต่อเลี้ยว (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>
var 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>