HTML Geolocation ใช้เพื่อรับตำแหน่งทางภูมิศาสตร์ตามเวลาจริงของผู้ใช้ เฉพาะในกรณีที่พวกเขาอนุญาตเท่านั้น สามารถใช้ได้หลายสาเหตุ มันใช้ JavaScript เพื่อรับละติจูดและลองจิจูด
หมายเหตุ − ก่อน Google Chrome 50 คำขอตำแหน่งทางภูมิศาสตร์สามารถอนุมัติได้ แต่สำหรับ Chrome 50 เฉพาะคำขอผ่าน HTTPS เท่านั้นที่ได้รับการอนุมัติและคำขอผ่าน HTTP จะถูกละเว้น
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
navigator.geolocation.getCurrentPosition()
ที่นี่ วัตถุที่ส่งคืนโดย getCurrentPosition() สามารถมีคุณสมบัติดังต่อไปนี้ −
| คุณสมบัติ | คืนค่า |
|---|---|
| coords.latitude | ละติจูดทางภูมิศาสตร์เป็นตัวเลขทศนิยม |
| coords.longitude | ลองจิจูดทางภูมิศาสตร์เป็นตัวเลขทศนิยม |
| coords.accuracy | ความแม่นยำของตำแหน่ง |
| coords.altitude | ระดับความสูงเป็นเมตรจากระดับน้ำทะเลปานกลาง |
| coords.altitudeความแม่นยำ | ความแม่นยำของระดับความสูงของตำแหน่ง |
| coords.heading | มุ่งหน้าเป็นองศาตามเข็มนาฬิกาจากทิศเหนือ |
| coords.speed | ความเร็วเป็นเมตรต่อวินาที |
| อิมสแตมป์ | วันที่/เวลาที่ตอบกลับ |
มาดูตัวอย่างว่าการระบุตำแหน่งทางภูมิศาสตร์ของ HTML ให้การจัดการข้อผิดพลาดได้อย่างไร -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
var latObj = document.getElementById("latitude");
var longObj = document.getElementById("longitude");
var divDisplay = document.getElementById("divDisplay");
function searchLoc(){
var lat = latObj.textContent.split(": ")[1];
var long = longObj.textContent.split(": ")[1];
var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
browseWindow = window.open(url, "browseWindow", "width=400, height=200");
}
function updateLocation(){
browseWindow.close();
var user = navigator.geolocation;
if (user)
user.getCurrentPosition(updatePosition, errorHandler);
else
divDisplay.textContent = "Geolocation is not supported in this browser";
}
function updatePosition(position) {
divDisplay.innerHTML = 'Location Updated<br>Current Location:';
latObj.textContent = 'Latitude: '+position.coords.latitude;
longObj.textContent = 'Longitude: '+position.coords.longitude;
}
function errorHandler(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
divDisplay.textContent = "You denied the request to get Geolocation"
break;
case error.POSITION_UNAVAILABLE:
divDisplay.textContent = "Your location information is unavailable"
break;
case error.TIMEOUT:
divDisplay.textContent = "The request to get your location timed out"
break;
case error.UNKNOWN_ERROR:
divDisplay.textContent = "Unknown error occurred"
break;
}
}
</script>
</body>
</html> 1) ก่อนคลิกปุ่มใด ๆ −
2) หลังจากคลิก 'ค้นหา ปุ่ม −
3) หลังจากคลิก 'อัปเดตตำแหน่ง ปุ่ม −
4) หลังจากคลิก ‘ค้นหา ปุ่ม −
5) หลังจากคลิก 'อัปเดตตำแหน่ง ปุ่ม ' และผู้ใช้ปฏิเสธการอนุญาตการเข้าถึงตำแหน่ง -
