利用H5的geolocation對象進行地理資訊定位
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理資訊定位</title>
</head>
<body>
<div id="demo"></div>
<button onclick="getLocation()">點我擷取位置資訊</button>
<button onclick="showPosition()">點我擷取位置1</button>
<script type="text/javascript">
var content = document.querySelector('#demo');
function getLocation(){
/**
* 第一個參數：定位成功後執行的函數
* 第二個參數：擷取使用者位置失敗時執行的函數，用于錯誤處理
*
*/
window.navigator.geolocation.getCurrentPosition(function(position){
//回調函數傳入一個 position 對象，就是擷取到的位置資訊。
//十進制數的緯度資料
var lat = position.coords.latitude;
//十進制數的經度資料
var long = position.coords.longitude;
content.innerHTML = 'Latitude:'+lat + ' Longitude :'+long;
},function(error){
//容錯處理的回調函數會傳入一個 PositionError 對象作為參數 即error
//console.log(msg);
//PositionError {code: 1, message: "User denied Geolocation"}
/*
UNKNOWN_ERROR:0
PERMISSION_DENIED: 1
POSITION_UNAVAILABLE: 2
TIMEOUT: 3
*/
switch(error.code){
case error.PERMISSION_DENIED:
//使用者不允許地理定位
content.innerHTML="User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
//無法擷取目前位置
content.innerHTML="Location information is unavailable.";
break;
case error.TIMEOUT:
//操作逾時
content.innerHTML="The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
//未知錯誤
content.innerHTML="An unknown error occurred.";
break;
}
});
}
function showPosition(){
//判斷浏覽器是否支援地理定位
if (window.navigator.geolocation) {
/**
* 第一個參數：定位成功後執行的函數
* 第二個參數：擷取使用者位置失敗時執行的函數，用于錯誤處理
* 第三個參數：PositionOptions，地理定位資訊設定選項
* {enableHighAccuracy: true,timeoout: 175000, maximumAge: 75000}
*- enableHighAccuracy 開啟高精度定位，預設 false
*- timeout 擷取使用者位置資訊的最長等待時間，指網絡請求時間，毫秒
*- maximumAge 允許使用者将一定時間内緩存的位置資訊快速傳回給 Web 應用，預設 0，毫秒
*/
window.navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
conten.innerHTML = '您的浏覽器不支援地理定位';
}
}
//回調函數傳入一個 position 對象，就是擷取到的位置資訊。
function showPosition(position){
//十進制數的緯度資料
var lat = position.coords.latitude;
//十進制數的經度資料
var long = position.coords.longitude;
content.innerHTML = 'Latitude:'+lat + ' Longitude :'+long;
}
//容錯處理的回調函數會傳入一個 PositionError 對象作為參數 即error
function showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
//使用者不允許地理定位
content.innerHTML="User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
//無法擷取目前位置
content.innerHTML="Location information is unavailable.";
break;
case error.TIMEOUT:
//操作逾時
content.innerHTML="The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
//未知錯誤
content.innerHTML="An unknown error occurred.";
break;
}
}
</script>
</body>
</html> 經測試，Microsoft Edge可以傳回定位資訊，Chrome浏覽器無法傳回定位資訊（通過手動設定的方式可以傳回），設定辦法如下：打開開發者工具，More tools->Sensors-Geolocation設定經緯度
![使用地理定位來自定義網絡釣魚[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)