時隔5個月了……
背景:新公司前段時間有個業(yè)務(wù),需要或許用戶的精確位置信息,兼容小程序畜挥、h5、內(nèi)嵌app中的h5
提示:這里主要描述h5的實現(xiàn)
嘗試一:使用uni.getLocation
uni.getLocation({
type: 'gcj02',
altitude: true
success: function (res) {
console.log('當前位置的經(jīng)度:' + res.longitude);
console.log('當前位置的緯度:' + res.latitude);
}
});
代碼部署的環(huán)境是https的婴谱,其中小程序上沒有什么問題蟹但,但在h5上獲取的位置信息有偏差,業(yè)務(wù)需要計算距離谭羔,有偏差這種情況肯定是不行的华糖。
嘗試二:使用騰訊地圖api
需要將文件引入https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js
使用該方法的時候進入頁面有授權(quán)彈框
qq.maps.Geolocation(key, referer)
因為有h5內(nèi)嵌的情況,自測時候試了下在設(shè)置中關(guān)閉app授權(quán)的場景(單瀏覽器中也有這種情況)口糕,問題就來了缅阳,長時間沒有success或者fail的返回,頁面的接口又強依賴位置情況景描。咱們要不害怕問題十办。
嘗試三:使用騰訊地圖api + getLocation
兩個位置的方法配上flag字段,默認優(yōu)先拿騰訊地圖返回的數(shù)據(jù)超棺,然后調(diào)uni.getLocation的方法向族,主要是為了處理app或瀏覽器不授權(quán)的情況,如果先拿到騰訊api返回的數(shù)據(jù)則后面的方法不重新賦值棠绘,否則要做一次重新賦值(保證拿精確的位置信息)件相。
現(xiàn)在我們的問題就解決了再扭,可以提測了……
噠咩哦
要先進行流程自測,然后正常走……咦夜矗,使用uni.chooseLocation的地方泛范,圖片怎么白掉了,報了
TypeError: i.LatLng is not a constructor
遇到問題咱們不要慌
經(jīng)過定位發(fā)現(xiàn)uni.chooseLocation跟引入的geolocation.min.js文件有沖突紊撕,如果在當前頁面刷新地圖可正常展示罢荡,所以就有個下面一個方案:在h5中使用uni.chooseLocation之前先將頁面刷新一下。
如果不想走刷新可以試著用地圖選點組件替代uni.chooseLocation的實現(xiàn)对扶。
目前沒有想到第三種方法……
以上区赵,謝謝觀看o( ̄▽ ̄)ブ