博客 / 詳情

返回

H5定位的一些坑和記錄

1.先用的百度的API(坑巨多):

getCurrentPosition() 方法

百度api文檔

大概代碼如下:

let geolocation = new BMap.Geolocation()

geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // 檢查 position 是否是默認值
          _this.position.longitude = r.point.lng
          _this.position.latitude = r.point.lat
       
        } else if(this.getStatus() == BMAP_STATUS_PERMISSION_DENIED){
          // alert('用户拒絕了定位權限');
        }
    })

坑1:
百度地圖必須有一個baidu-map的html 標籤 ,然後在@ready方法裏面加載BMap對象..
當你的頁面剛好有初始化異步方法(如init)時,並且異步方法的回調函數要用到BMap對象,
那麼你只能在@ready方法裏調用init,保證BMap對象可以訪問

如果百度地圖加載失敗那麼你的init方法就廢了..是的,這標籤只有ready 一個方法..

坑2:
定位彈框會讓用户點"允許"和"不允許",
無論你點什麼,this.getStatus()的值永遠是0,也就是BMAP_STATUS_SUCCESS,並且永遠會獲取到位置..

坑3:
位置返回了基本的經緯座標,但是中文地址位置經常就那麼一兩個字段有值..

2.後用H5的API:

navigator.geolocation.getCurrentPosition(showPosition,showError);

H5定位文檔

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
}

坑1:
只返回了經緯度,沒有中文地址位置

與百度不同的是:
用户點不允許時getCurrentPosition 返回的就是不允許狀態,符合邏輯,
並且沒有影響到init方法的異步執行,沒有像百度那樣的@ready方法

但是他們都有一個通病

引用
https://blog.csdn.net/weixin_39906358/article/details/117817941
當請求iOS開始定位的時候,會彈出一個提示框,提示你是否"允許"定位,允許定位繼續下一步,如果一不小心點了下"不允許"之後,會發現,下次進到這個h5之後再也不會提示請求定位權限的提示框了。"不允許"被緩存了下來。再次調用geolocation會報 error.PERMISSION_DENIED 錯誤
而且沒有相應的api能重啓提示框。
user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.