目錄
一、簡介
最近在項目中，有需要使用到獲取用戶當前地理位置信息的功能，獲取當前用戶位置保存到數據庫中的場景，並且需要支持多種地圖定位方式，我這裏採用系統參數配置的方式，暫時實現了高德地圖和騰訊地圖兩種方式，下面我們就分別對兩種地圖的實現方式做一個總結。
二、高德地圖
【a】註冊高德地圖開發者賬號獲取開發者Key
高德開放平臺地址：https://console.amap.com/dev/key/app
選擇：Web端（JS API）服務平臺
【b】頁面引入相關JS
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=這裏填寫上一步申請成功的應用key"></script>
【c】獲取當前位置代碼
//初始化高德地圖定位
initGdMap = () => {
let mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function() {
let geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默認:true
timeout: 10000, // 超過10秒後停止定位，默認：無窮大
maximumAge: 0, // 定位結果緩存0毫秒，默認：0
convert: true, // 自動偏移座標，偏移後的座標爲高德座標，默認：true
showButton: true, // 顯示定位按鈕，默認：true
buttonPosition: 'LB', // 定位按鈕停靠位置，默認：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按鈕與設置的停靠位置的偏移量，默認：Pixel(10, 20)
showMarker: true, // 定位成功後在定位到的位置顯示點標記，默認：true
showCircle: true, // 定位成功後用圓圈表示定位精度範圍，默認：true
panToLocation: true, // 定位成功後將定位到的位置作爲地圖中心點，默認：true
zoomToAccuracy: true, // 定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：false
});
mapObj.addControl(geolocation);
geolocation.getCurrentPosition((status, result) => {
if (status === 'complete') {
//縮減地址 result.formattedAddress爲詳細地址(省市縣)
// let currentAddress = result.addressComponent.building;
console.log(result);
} else {
Toast.fail('定位失敗', 1, () => {
props.dispatch({
type: 'studentWorkStudy/changeCurrentAddress',
currentAddress: '定位失敗',
});
});
}
});
});
};
【d】調用結果
注意事項：移動端包括手機，pad和其它帶有GPS定位芯片的智能設備（如手錶、音箱等），移動端的系統包括iOS和Android。成功完成定位需要達成以下前提條件：
- 系統GPS打開；
- 所使用的App或瀏覽器已獲取定位權限；
- 對打開的頁面允許使用定位；
- 對於iOS10以上系統和Android的一些版本已禁止在非HTTPS協議的域名下定位，請儘快將站點升級到HTTPS；
注意，以上只是定位成功的前提條件，滿足這些並不一定等於可以成功定位，定位還與當前位置（室內會影響GPS信息）、手機信號和定位權限等因素影響。如果您在使用過程中定位失敗，可以參考FAQ：Geolocation的定位流程以及定位失敗的原因 。
更多高德地圖相關API功能可以參考：https://lbs.amap.com/api/javascript-api/summary進行學習。
三、騰訊地圖
說實話，騰訊地圖沒有那麼準，如果有開通HTTPS域名訪問的網站，建議使用高德地圖來進行定位，不然獲取的位置可能會有1至2公里的誤差都有可能。
【a】註冊騰訊地圖開發者賬號獲取開發者Key
騰訊地圖開發者平臺地址：https://lbs.qq.com/dev/console/key/manage
【b】頁面引入相關JS
<script type="text/javascript" src="https://map.qq.com/api/js?v=2.exp&key=這裏填寫上一個步驟申請的key"></script>
【c】獲取當前位置代碼
由於考慮到騰訊地圖不是特別準，所以我的做法是：先獲取到當前位置的經緯度信息，然後稍稍做一些微調，然後通過騰訊地圖相關WebService API接口進行經緯度逆解析地理位置信息。
逆地址解析（座標位置描述）參考文檔：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
注意：下面的mapSecret其實就是剛剛第一步申請的騰訊地圖Key.
//初始化騰訊地圖定位
initTencentMap = (mapSecret = '') => {
if (!mapSecret) {
Toast.fail('請到系統管理設置地圖祕鑰');
return;
}
let props = this.props;
//初始化騰訊地圖定位
let geolocation = new qq.maps.Geolocation(mapSecret, 'ly-sm-mobile-ui');
let options = { timeout: 8000 };
geolocation.getLocation((position) => {
//稍微修正騰訊地圖的經緯度偏差
let latitude = position.lat + 0.00134;
let longitude = position.lng + 0.01191;
props.dispatch({
type: 'studentWorkStudy/getAddressList',
params: {
location: `${latitude},${longitude}`,
},
callback: data => {
if (data) {
let dataMap = JSON.parse(data);
console.log(dataMap.result);
//地址描述
// let address = dataMap.result.address || '';
// 經過騰訊地圖優化過的描述方式
let recommendAddress = dataMap.result.formatted_addresses.recommend || '';
//更多參數可參考：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder
props.dispatch({
type: 'studentWorkStudy/changeCurrentAddress',
currentAddress: recommendAddress,
});
}
},
});
}, () => {
Toast.fail('定位失敗', 1, () => {
props.dispatch({
type: 'studentWorkStudy/changeCurrentAddress',
currentAddress: '定位失敗',
});
});
}, options);
};
通過逆地址解析需要後端服務配合去發起WebService請求，其實就是發起一個http請求，請求URL就如下面那樣，只是URL上面的經緯度信息是獲取的當前位置的經緯度。
調用示例： GET請求示例，注意參數值要進行URL編碼
https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&get_poi=1
請求參數說明：
| 參數 | 必填 | 說明 | 示例 |
|---|---|---|---|
| location | 是 | 位置座標，格式： location=lat<緯度>,lng<經度> |
location= 39.984154,116.307490 |
| get_poi | 否 | 是否返回周邊POI列表： 1.返回；0不返回(默認) |
get_poi=1 |
| poi_options | 否 | 用於控制POI列表： 1 poi_options=address_format=short 返回短地址，缺省時返回長地址 2 poi_options=radius=5000 半徑，取值範圍 1-5000（米） 3 poi_options=page_size=20 每頁條數，取值範圍 1-20 4 poi_options=page_index=1 頁碼，取值範圍 1-20 注：分頁時page_size與page_index參數需要同時使用 5 poi_options=policy=1/2/3/4/5 控制返回場景， policy=1[默認] 以地標+主要的路+近距離POI爲主，着力描述當前位置； policy=2 到家場景：篩選合適收貨的POI，並會細化收貨地址，精確到樓棟； policy=3 出行場景：過濾掉車輛不易到達的POI(如一些景區內POI)，增加道路出入口、交叉口、大區域出入口類POI，排序會根據真實API大用戶的用戶點擊自動優化。 policy=4 社交簽到場景，針對用戶簽到的熱門 地點進行優先排序。 policy=5 位置共享場景，用戶經常用於發送位置、位置分享等場景的熱門地點優先排序 6 poi_options=category=分類詞1,分類詞2， 指定分類，多關鍵詞英文逗號分隔； （支持類別參見：附錄） |
【單個參數寫法示例】： poi_options=address_format=short 【多個參數英文分號間隔，寫法示例】： poi_options=address_format=short;radius=5000; page_size=20;page_index=1;policy=2 |
| key | 是 | 開發密鑰（Key） | key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 |
| output | 否 | 返回格式：支持JSON/JSONP，默認JSON | output=json |
| callback | 否 | JSONP方式回調函數 | callback=function1 |
返回結果示例：
{
"status": 0,
"message": "query ok",
"request_id": "c165b6de-b9d9-11ea-8207-5254004df5fd",
"result": {
"location": {
"lat": 39.984154,
"lng": 116.30749
},
"address": "北京市海淀區北四環西路66號",
"formatted_addresses": {
"recommend": "海淀區中關村中國技術交易大廈(彩和坊路)",
"rough": "海淀區中關村中國技術交易大廈(彩和坊路)"
},
"address_component": {
"nation": "中國",
"province": "北京市",
"city": "北京市",
"district": "海淀區",
"street": "北四環西路",
"street_number": "北四環西路66號"
},
"ad_info": {
"nation_code": "156",
"adcode": "110108",
"city_code": "156110000",
"name": "中國,北京市,北京市,海淀區",
"location": {
"lat": 40.045132,
"lng": 116.375
},
"nation": "中國",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"address_reference": {
"business_area": {
"id": "14178584199053362783",
"title": "中關村",
"location": {
"lat": 39.980598,
"lng": 116.310997
},
"_distance": 0,
"_dir_desc": "內"
},
"famous_area": {
"id": "14178584199053362783",
"title": "中關村",
"location": {
"lat": 39.980598,
"lng": 116.310997
},
"_distance": 0,
"_dir_desc": "內"
},
"crossroad": {
"id": "529979",
"title": "海淀大街/彩和坊路(路口)",
"location": {
"lat": 39.982498,
"lng": 116.30809
},
"_distance": 185.8,
"_dir_desc": "北"
},
"town": {
"id": "110108012",
"title": "海淀街道",
"location": {
"lat": 39.974819,
"lng": 116.284409
},
"_distance": 0,
"_dir_desc": "內"
},
"street_number": {
"id": "595672509379194165901290",
"title": "北四環西路66號",
"location": {
"lat": 39.984089,
"lng": 116.308037
},
"_distance": 45.8,
"_dir_desc": ""
},
"street": {
"id": "9217092216709107946",
"title": "彩和坊路",
"location": {
"lat": 39.97921,
"lng": 116.308411
},
"_distance": 46.6,
"_dir_desc": "西"
},
"landmark_l2": {
"id": "3629720141162880123",
"title": "中國技術交易大廈",
"location": {
"lat": 39.984104,
"lng": 116.307503
},
"_distance": 0,
"_dir_desc": "內"
}
},
"poi_count": 10,
"pois": [
{
"id": "3629720141162880123",
"title": "中國技術交易大廈",
"address": "北京市海淀區北四環西路66號",
"category": "房產小區:商務樓宇",
"location": {
"lat": 39.984104,
"lng": 116.307503
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 0,
"_dir_desc": "內"
},
{
"id": "9969038414753335812",
"title": "騰訊科技(北京)有限公司(中國技術交易大廈)",
"address": "北京市海淀區北四環西路66號中國技術交易大廈第三極大廈5-11層",
"category": "公司企業:公司企業",
"location": {
"lat": 39.984131,
"lng": 116.307503
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 0,
"_dir_desc": "內"
},
{
"id": "2845372667492951071",
"title": "中國技術交易大廈A座",
"address": "北京市海淀區北四環西路66號",
"category": "房產小區:商務樓宇",
"location": {
"lat": 39.984329,
"lng": 116.307419
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 20.4,
"_dir_desc": ""
},
{
"id": "3724888736111897241",
"title": "萬學教育集團",
"address": "北京市海淀區北四環西路66號中國技術交易大廈",
"category": "公司企業:公司企業",
"location": {
"lat": 39.984085,
"lng": 116.307426
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 9.2,
"_dir_desc": ""
},
{
"id": "13477589832396847863",
"title": "品·咖啡",
"address": "北京市海淀區北四環西路66號中國技術交易大廈1樓大廳內",
"category": "娛樂休閒:咖啡廳",
"location": {
"lat": 39.984192,
"lng": 116.30735
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 12.5,
"_dir_desc": ""
},
{
"id": "3187032738687555052",
"title": "中關村創業大街",
"address": "北京市海淀區海淀西大街",
"category": "購物:商業步行街",
"location": {
"lat": 39.983013,
"lng": 116.306732
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 36.3,
"_dir_desc": "東北"
},
{
"id": "7246616758286733108",
"title": "基督教堂(彩和坊路)",
"address": "北京市海淀區彩和坊路9號",
"category": "旅遊景點:教堂",
"location": {
"lat": 39.983135,
"lng": 116.30764
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 69.5,
"_dir_desc": "北"
},
{
"id": "12925244666643621769",
"title": "中國技術交易大廈B座",
"address": "北京市海淀區北四環西路66號",
"category": "房產小區:商務樓宇",
"location": {
"lat": 39.983906,
"lng": 116.307556
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 28.2,
"_dir_desc": ""
},
{
"id": "12689244359326172642",
"title": "車庫咖啡",
"address": "北京市海淀區中關村創業大街6號樓2層",
"category": "娛樂休閒:咖啡廳",
"location": {
"lat": 39.983898,
"lng": 116.306908
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 57.1,
"_dir_desc": "東北"
},
{
"id": "2926578115367138813",
"title": "武勝豬肝麪",
"address": "北京市海淀區北四環西路66號",
"category": "美食:小喫快餐",
"location": {
"lat": 39.984184,
"lng": 116.307503
},
"ad_info": {
"adcode": "110108",
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
"_distance": 3.6,
"_dir_desc": ""
}
]
}
}
通過逆地址解析，還可以獲取當前位置的附近點位置集合信息，這在某些業務場景下還有很有用的。
【d】定位結果
更多騰訊地圖相關API可以參考：https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview進行學習。
四、總結
以上就是關於高德地圖和騰訊地圖獲取用戶當前位置的功能，簡單來說，基本上都是按照官方文檔進行的，這裏只是做一個總結，方面後面用到的時候可以翻出來看看，還有很多更騷的操作可以參考對應的官方文檔進行學習。