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

前言

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

一、選擇地址的回調路徑不兼容哈希路由

二、回調後騰訊地圖返回了完整的地址，而用戶須要省市區具體名稱

三、獲取省市區具體名稱後，如何和後端的數據對上對應的 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

著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。