vue使用騰訊地圖選點組件問題總結

前言

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

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

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

以上內容轉載自Jioho_的文章《vue中使用騰訊地圖選擇地址》

來源：CSDN

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。