API vị trí địa lý HTML5 cho phép bạn chia sẻ vị trí của mình với các trang web yêu thích của bạn. Javascript có thể nắm bắt được vĩ độ và kinh độ của bạn và có thể được gửi đến máy chủ web phụ trợ và thực hiện những việc quan tâm đến vị trí như tìm các doanh nghiệp địa phương hoặc hiển thị vị trí của bạn trên bản đồ. Tọa độ vị trí địa lý chỉ định vị trí địa lý của thiết bị.
Các phương thức định vị getCurrentPosition () và getPositionUsingMethodName () chỉ định phương thức gọi lại để truy xuất thông tin vị trí. Các phương thức này được gọi là không đồng bộ với một đối tượng Vị trí lưu trữ thông tin vị trí đầy đủ.
Chúng ta sẽ sử dụng phương thức getCurrentPostion (). Để có được vị trí hiện tại bằng cách sử dụng Định vị địa lý HTML5 với Google Maps, bạn cần đặt một khóa API cho API Google Static Maps.
Truy cập https://console.developers.google.com và nhận khóa API miễn phí cho Google Map. Thêm khóa này vào mã để làm việc Định vị địa lý với nó.
Bạn có thể thử chạy mã sau để hiển thị vị trí hiện tại bằng Định vị địa lý HTML5 với Google Maps
Ví dụ
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function showLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlongvalue = position.coords.latitude + ","
+ position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlongvalue+"&zoom=14&size=400x300&key
=AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
document.getElementById("mapholder").innerHTML =
"<img src='"+img_url+"'>";
}
function errorHandler(err) {
if(err.code == 1) {
alert("Error: Access is denied!");
} else if( err.code == 2) {
alert("Error: Position is unavailable!");
}
}
function getLocation(){
if(navigator.geolocation){
// timeout at 60000 milliseconds (60 seconds)
var options = {timeout:60000};
navigator.geolocation.getCurrentPosition
(showLocation, errorHandler, options);
} else{
alert("Sorry, browser does not support geolocation!");
}
}
</script>
</head>
<body>
<div id="mapholder"></div>
<form>
<input type="button" onclick="getLocation();" value="Get Location"/>
</form>
</body>
</html>