在網頁和小程式開發工作中，擷取訪客位置的需求非常常見。除了地圖上位置資訊的表達，很多時候還需要輸出使用者目前所在位置的自然語言描述。此時，可以通過百度地圖浏覽器定位API和逆地理編碼API結合，實作這一需求，精确描述出頁面通路者目前所在的位置。本文将具體實作進行說明。
開始之前
在開始進行開發工作之前，需要先後進行注冊百度賬号、申請成為百度開發者、擷取服務秘鑰的操作，在此不過多贅述。相關的操作可以檢視基于Web的百度地圖二次開發入門實踐一文中的說明。
為了達到擷取使用者所在位置描述資訊的需求，需要分為兩步走。首先需要利用百度地圖浏覽器定位API擷取使用者所在位置的經緯度描述，然後利用擷取的經緯度資訊請求百度地圖逆地理編碼API，擷取使用者所在的位置描述。
擷取使用者所在位置的經緯度資訊
為了更加精确的擷取使用者所在位置的經緯度，采用精度較高的浏覽器定位方法。首先，在頁面的head标簽中，對百度地圖的JS API進行引入。
<head>
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
</head>
進而，在body标簽内的适當位置編寫代碼調用浏覽器定位API，代碼如下：
<script>
var lng; //經度
var lat; //緯度
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
lng = r.point.lng;
lat = r.point.lat;
}
else {
alert('failed'+this.getStatus());
}
});
</script>
在這段代碼的開始部分，分别定義變量lng與lat用于存儲經度資訊資料與緯度資訊資料。建立一個BMap的Geolocation對象，并調用getCurrentPosition方法，擷取目前使用者所在位置的經緯度描述。然後把資訊數值記錄在最開始定義的變量中，進而實作經緯度資訊的擷取。對于浏覽器定位的較長的描述和其他操作可以參考百度地圖開放平台JavaScript API定位參考手冊。
根據經緯度資訊擷取位置描述
利用經緯度資訊擷取使用者所在位置描述需要調用服務端的逆地理編碼API。逆地理編碼API的請求URL為：http://api.map.baidu.com/reverse_geocoding/v3/。為了實作我們的需求，需要包含如下參數：
| 參數名稱 | 參數含義 |
|---|---|
| ak | 開發者密鑰 |
| output | 結果輸出格式 |
| location | 位置的緯度和經度資訊 |
使用ajax進行請求，将調用逆地理編碼API的相關代碼加入到成功擷取經緯度資訊之後，代碼如下：
<script>
var lng; //經度
var lat; //緯度
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
lng = r.point.lng;
lat = r.point.lat;
$.ajax({
type: "get",
url: "http://api.map.baidu.com/reverse_geocoding/v3/",
data: {
"ak": "onbuO***********IpHNaFiP",
"output" : "json",
"location" : lat + "," + lng
},
dataType: 'jsonp', // 傳回對象
success: function(data) {
alert(data.result.formatted_address);
},
error: function(data) {
// 請求失敗函數
console.log(data);
}
})
}
else {
alert('failed'+this.getStatus());
}
});
</script>
在傳回結果中，具體的格式化地理位置描述為傳回内容result下的formatted_address項。還有其他傳回内容可選，具體可以參考百度開放平台逆地理編碼API手冊。
在上述内容中，存在一些關鍵點。例如，dataType需要設定為“jsonp”而非“json”，如果使用json，可能會出現跨域相關的報錯，進而無法實作需求。此外，這一API是基于服務端的，而在調用的過程中ak會被明文暴露，是以還需要采取一些措施。
總體而言，上述代碼已經能夠實作目前的需求。對于上述功能在手機端進行預覽，得到的效果如下：
在允許定位之後，得到位置描述資訊。
完整的網頁頁面代碼見：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=qA8hG********xtb9B"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>位置測試</title>
</head>
<body>
<script>
var lng; //經度
var lat; //緯度
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
lng = r.point.lng;
lat = r.point.lat;
$.ajax({
type: "get",
url: "http://api.map.baidu.com/reverse_geocoding/v3/",
data: {
"ak": "onbuO***********IpHNaFiP",
"output" : "json",
"location" : lat + "," + lng
},
dataType: 'jsonp', // 傳回對象
success: function(data) {
alert(data.result.formatted_address);
},
error: function(data) {
// 請求失敗函數
console.log(data);
}
})
}
else {
alert('failed'+this.getStatus());
}
});
</script>
</body>
</html>