網上有很多關於html5 geolocation 獲取地理定位的方法，我試了下，只有在IE edge瀏覽器可以成功獲取到，在chrome,firefox,手機端的safari,QQ瀏覽器，微信瀏覽器，都返回一樣的錯誤信息：
POSITION_UNAVAILABLE
網上的方法大概是這樣的：
if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess , onError); }else{ alert("您的瀏覽器不支持使用HTML 5來獲取地理位置服務"); } //定位數據獲取成功響應 function onSuccess(position){ alert('緯度: ' + position.coords.latitude + '\n' + '經度: ' + position.coords.longitude + '\n' + '海拔: ' + position.coords.altitude + '\n' + '水平精度: ' + position.coords.accuracy + '\n' + '垂直精度: ' + position.coords.altitudeAccura) } //定位數據獲取失敗響應 function onError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("您拒絕對獲取地理位置的請求"); break; case error.POSITION_UNAVAILABLE: alert("位置信息是不可用的"); break; case error.TIMEOUT: alert("請求您的地理位置超時"); break; case error.UNKNOWN_ERROR: alert("未知錯誤"); break; } }
獲取到的是經緯度，所以要調百度或者谷歌的地圖api，來轉換為城市。
我這里嘗試返回錯誤信息的原因我猜可能是html5 默認調用的谷歌的接口，會有安全限制，所以我這里使用了騰訊的api實現。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端定位模塊</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#pos-area {
background-color: #009DDC;
margin-bottom: 10px;
width: 100%;
overflow: scroll;
text-align: left;
color: white;
}
#demo {
padding: 8px;
font-size: small;
}
#btn-area {
height: 100px;
}
button {
margin-bottom: 10px;
padding: 12px 8px;
width: 42%;
border-radius: 8px;
background-color: #009DDC;
color: white;
}
</style>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>
<div id="pos-area">
<p id="demo">點擊下面的按鈕，獲得對應信息：<br /></p>
</div>
<div id="btn-area">
<button onClick="geolocation.getLocation(showPosition, showErr, options)">獲取精確定位信息</button>
<button onClick="geolocation.getIpLocation(showPosition, showErr)">獲取粗糙定位信息</button>
<button onClick="showWatchPosition()">開始監聽位置</button>
<button onClick="showClearWatch()">停止監聽位置</button>
</div>
<script type="text/JavaScript">
var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");
document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';
var positionNum = 0;
var options = {timeout: 8000};
function showPosition(position) {
positionNum ++;
document.getElementById("demo").innerHTML += "序號：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showErr() {
positionNum ++;
document.getElementById("demo").innerHTML += "序號：" + positionNum;
document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失敗！";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showWatchPosition() {
document.getElementById("demo").innerHTML += "開始監聽位置！<br /><br />";
geolocation.watchPosition(showPosition);
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
function showClearWatch() {
geolocation.clearWatch();
document.getElementById("demo").innerHTML += "停止監聽位置！<br /><br />";
document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
};
</script>
</body>
</html>
這是騰訊api接口的示例，很好用，很適合wap端網站定位實現