uniapp開發企業微信應用中的定位問題記錄

安木夕發表於2023-05-13

專案背景：開發工具為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、`getLocation`bug

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吧。