項目背景：開發工具爲HBuilderX，框架爲uniapp，開發移動端的Web應用，在企業微信中使用（自建應用），Web開發的應用，不是小程序。
需求點：獲取用戶當前的位置信息，技術流程包括以下幾個環節：
- 1、獲取當前用戶的經緯度位置信息，用的uniapp的
uni.getLocation()接口。- 2、顯示一個地圖，標記用戶的位置，用的百度地圖SDK。
- 3、地圖可以拖動，拖動後標記點會跟着移動，讓用戶可以自行調整位置。
- 4、獲取標記點詳細地址，採用百度地圖的逆解析API，獲得詳細位置信息。
❓問題：但實際開發中定位老是不準，存在各種問題，最後通過升級HTTPS解決，記錄一下處理過程。
01、百度地圖
到百度地圖開放平臺，註冊一個開發者賬號，百度地圖需要申請一個KEY才能使用。可根據項目情況選擇個人賬號，還是企業賬號。
| 類型 | 個人賬號 | 企業開發者賬號 |
|---|---|---|
| 應用場景 | 個人學習 | 企業商業使用 |
| 認證方式 | 開發者認證，個人實名認證（已完成） | 企業名稱、營業執照、法人、聯繫方式、對公帳號信息 |
| 認證時長 | 很快 | 幾分鐘-5個工作日，多種認證方式 |
| 收費 | 白嫖 | 商業授權，基礎版5W/年 |
| 調用限額 | JS API 定位：5,000次/日，併發10次/秒 JS API 逆地理編碼：5,000次/日，併發30次/秒 |
JS API 定位：30W次/日，併發100次/秒 JS API 逆地理編碼：300W次/日，併發100次/秒 |
方案：
- 如果使用次數較多，則需要考慮企業賬號，或購買額度。
- 一般小項目、公司內部使用，調用頻次不多，可申請個人賬號，或者多申請幾個賬號，輪訓使用。
📢 國內地圖三巨頭騰訊、高德、百度的商業授權都是收費的，起步價都是5W/年。
逆地址解析：
// 根據座標獲取位置描述
export function getLocationByPoint(p, BMap) {
if (!p || !p.lng) return ''
const gc = new BMap.Geocoder()
return new Promise((resolve) => {
gc.getLocation(p, (rs) => {
const addComp = rs.addressComponents
resolve(addComp.province + addComp.city + addComp.district + addComp.street+ addComp.district)
})
})
}
座標轉換，wgs84座標轉換爲火星座標，否則在百度地圖上顯示會有偏差
// wgs84 座標轉百度座標
export function WGS2BD(p, BMap) {
const wpoint = new BMap.Point(p.lng, p.lat)
const convertor = new BMap.Convertor()
return new Promise(resolve => {
convertor.translate([wpoint], 1, 5, function (data) {
if (data.status === 0) {
resolve(data.points[0])
}
})
})
}
📄資料：
02、UNI的定位
UNI的定位核心API：uni.getLocation(OBJECT)，但在使用中定位有問題。
- uni自帶的
getLocation在移動端瀏覽器上運行正常，第一次會提示定位權限。type爲wgs84可定位，如果爲gcj02則定位失敗。 - 如果H5應用嵌入企業微信，在企業微信中運行，則會定位失敗，可能是權限問題，無法獲取手機定位權限。
type String：默認爲 wgs84 返回 gps 座標，gcj02 返回國測局座標，可用於 uni.openLocation 和 map 組件座標，App 和 H5 需配置定位 SDK 信息纔可支持 gcj02。
2.1、getLocationbug
uni.getLocation還有bug，就是如果內部調用失敗，就會報錯，且無法捕獲，看源碼（gitee源碼）是其內部使用了Promise但沒有處理好異常導致的，外面無法捕獲。
Uncaught (in promise) Error: network error
2.2、配置地圖key-沒解決
定位不準，繼續尋找方案。打包的H5是在企業微信中使用，就申請了一個騰訊地圖的Key，在uniapp中配置。如下圖，在Web配置中啓用地圖定位，填上騰訊開發者key。
然而並沒有什麼改善，返回的定位依然是不準的。這裏的不準不是有偏差，而是一個城市裏的位置都一樣，都指向市政府。
2.3、微信JS-SDK
企業微信爲應用開發提供了一個JS-SDK，可以用來定位、獲取藍牙、攝像頭等權限。
// 獲取用戶當前位置
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude; // 緯度
var longitude = res.longitude; // 經度
var speed = res.speed; // 速度，以米/秒計算
var accuracy = res.accuracy; // 位置精度，以米爲單位的定位誤差
alert("您的位置是：" + latitude + "," + longitude);
},
fail: function (res) {
alert("獲取用戶位置信息失敗！");
}
});
但使用前必須先用接口註冊，流程比較麻煩，需要前後端配合。官方使用說明，看官方要求和項目情況可能存在問題，還是先試試HTTPS吧。
2.4、開啓HTTPS-通過
部署的網站是HTTP的，並沒有啓用HTTPS，在微信小程序的開發文檔中有明確說明需要HTTPS進行網絡通信，那就升級到HTTPS吧。
在騰訊雲申請免費的HTTPS證書，總計可以申請最多50張免費的SSL證書（其中20張免費證書支持綁定全網域名，30張免費證書可綁定騰訊雲域名），成爲騰訊雲 V2 會員即可提升綁定全網域名的額度。
- 免費證書不支持泛域名（*.qq.com）。
- 免費證書有效期爲1年，到期後如需繼續使用證書，請重新申請並安裝。
- 正式版可以自動續費，單域名證書個人版500+/年，企業版2K+/年；泛域名證書個人版2K+/年，企業版5K+/年。
輸入域名，選擇DNS驗證，需要在域名解析處添加一條TEXT記錄。參考官方DNS 驗證文檔。
驗證通過後，即可下載證書。然後配置Nginx，騰訊文檔Nginx 服務器 SSL 證書安裝部署。
- 先確保Nginx是否安裝了ssl模塊“http_ssl_module”
- 證書拷貝到cert 文件夾下。
- 修改配置文件“nginx.conf ”，添加“https server”配置。
- 重啓Nginx。
配置好HTTPS的相關配置，重新打包部署，PC端正常，但移動端存在故障。移動端訪問老是被重定向到HTTP上了，幾經波折，發現是剛纔在uniapp打包時順手勾上了一個選項“啓用https協議”，去掉就好了。😂😂😂，這個選項是幹什麼的？
重新打包更新，定位準確了！😀😀😀
03、調試uniapp
可以安裝微信開發者工具，用公衆號網頁來調試H5，打開頁面後提示錯誤：“無法獲取用戶身份”。
需要兩個條件：
- 1、開啓開發者模式：我的企業 -> 微信插件 -> 開發者工具勾選上
- 2、注意是“當前管理員”，開發者工具登錄的微信必須是當前企業微信的管理員。
參考資料：
©️版權申明：版權所有@安木夕，本文內容僅供學習，歡迎指正、交流，轉載請註明出處！原文編輯地址-語雀