vue使用騰訊位置服務選點元件問題總結

阿新 • • 發佈：2020-08-21

前言

使用地圖選點元件引發的一系列問題：

1、選擇地址的回撥路徑不相容雜湊路由

2、回撥後騰訊地圖返回了完整的地址，而使用者需要省市區具體名稱

3、獲取省市區具體名稱後，如何和後端的資料對上對應的 ID

開始使用

採用的是地圖 API 的第二種方式，跳轉新的頁面，通過回撥路徑把地址資訊帶回來原先頁面

程式碼如下：

let url = escape(
  `${window.location.origin}${window.location.pathname}/#/member/address_form?action=${this.$route.query.action}`
)
this.$router.go(-1)
window.location.href = `https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=${url}&key=這裡改成你的騰訊地圖金鑰&referer=這裡是騰訊地圖應用名稱`

url 的處理:

為什麼需要這麼麻煩的拼接呢?

因為如果每次我都直接拿 window.location.href那麼如果使用者多次選擇地址，使用 escape 轉碼的時候，會把路徑的中文都轉掉，可是我們並不需要每次都把騰訊地圖帶給我們的引數都重新放到回撥地址中，所以就需要自己拼接路徑
為什麼需要 escape

在 vue 中使用的是原來的雜湊路由模式。即路徑上會帶上 #。這時候回撥地址就不能識別了，就需要用到 escape

做了 url 處理，發現就可以跳轉過去了。那第一步就成功了。解決了第一個問題：選擇地址的回撥路徑不相容雜湊路由

問題 2. 需要省市區的名稱

這是在地圖上隨便定的一個點。路徑返回大概就是這些引數
包含了

name=印象家園酒店公寓%28廣園中路店%29&latng=23.15809,113.27209&addr=廣東省廣州市白雲區廣園中路 216 號&city=廣州市&module=locationPicker

大概就是這樣的：

{
  name: "詳細的地址名稱",
  latng: "選擇的地址的經緯度",
  addr: "省市區+地方名",
  city: "城市名",
  module: "標識"
}

那麼我需要處理的就是經緯度，還有省市區名稱

var urlData = this.$route.query // 獲取路徑上的引數
var latng = urlData.latng.split(",") // 獲取經緯度
var reg = /.+?(省|市|自治區|自治州|縣|區)/g // 省市區的正則

console.log(latng) // [23.15809,113.27209] 這個陣列就是對應的經度緯度了
console.log(urlData.addr.match(reg)) // ['廣東省','廣州市','白雲區']

和後端的資料對接

進過上面 2 步。經緯度，詳細地址，省市區都已經拿到了。那就差和後端的資料匹配上了（這個操作見仁見智，不一定每個人都有）

後端資料大概長這樣：

我要做的就是拿到中文名稱，匹配出對應的 ID


methods:{
  /**
   * 遞迴方法，獲取城市ID等
   * @param {Array} list 資料庫中的地址列表（每次迴圈都會拿自己的child來匹配）
   * @param {Array} param 需要查詢的省市區陣列
   * @param {Number} level 當前遍歷的深度
   * @param {Array} area_ids 當前已遍歷找到的省市區ID陣列
   * @return 對應的ID陣列
   */
  locationGhosts (list, param, level = 0, areaIds = []) {
    let child = []
    list.some(item => {
      if (param[level].indexOf(item.area_name) !== -1) {
        areaIds[level] = item.area_id // 儲存ID，已經找到一個
        child = item.child
        return true
      }
    })

    // 判斷不要改三目運算子，詳情檢視尾遞迴相關描述
    if (level === 2) {
      return areaIds
    } else {
      return this.locationGhosts(child, param, ++level, areaIds)
    }
  }
}

// 呼叫遞迴，獲取對應的省市區ID
let areaIds = this.locationGhosts(this.area_list, urlData.addr.match(reg), 0)

areaIds[0] // 省份ID
areaIds[1] // 城市ID
areaIds[2] // 地區ID

至此，一個選擇地址的功能就算是完美完成了！