騰訊地圖踩坑記之選點元件

最近遇到一個需求，h5頁面使用者新增位址的時候除了可以調起級聯菜單彈窗進行選擇也可以點選圖示進入地圖進行選擇，如下圖：

我們用的是騰訊地圖，要使用騰訊地圖功能首先要組冊key完成驗證，這個按照文檔一步一步來就可以了，完成之後需要進行一些設定，就我這個選點元件而言就必須開啟 WebServiceAPI，否則無法使用相應的地圖功能。

騰訊地圖選點元件，用起來還是挺友善的，使用方式有兩種：一種是使用iframe内嵌調用；還有一種是通過<a>标簽直接跳轉一個新的地圖頁面。iframe嵌入不是很好用，于是選了第二種。通過頁面跳轉的方式調用該元件的時候，需要設定backurl參數，使用者點選選中的位置點後，頁面跳轉至開發者指定的傳回位址（backurl），并将位置資訊添加到回跳位址（backurl）上，具體使用可檢視文檔。我是使用vue架構開發的，具體實作代碼如下：

//1.<tempalte>中
<a :href="href" target="_blank" rel="external nofollow"  @click="toSelectAddress">
<img src="@/assets/images/address/ic_address_location.png" class="location-icon"></a>

//<script>中
//2.在data中定義一個值用來存放跳轉的href值
href: 'http://apis.map.qq.com/tools/locpicker?search=1&type=0&key=yourkey&referer=myapp'

//3.點選事件處理 主要是擷取目前頁面的url 作為backUrl值然後拼接到href上
toSelectAddress() {
  let href = window.location.href;
  let urlArr = href.split('?');
  this.href = this.href + `&backurl=${urlArr[0]}` 
}

//4.進入地圖頁面顯示是你目前位址附近，你也可以搜尋，比對的位址會顯示在頁面下方清單中，
//點選位址就可以回到backurl所指的頁面，此時位址相關值會拼接到backurl上

//5.解析攜帶位址資訊的URL，擷取資訊，我是通過處理把位址資訊轉化成對象友善使用
//處理URL
let handleUrl = function(url) {
	let decodedUrl = decodeURI(url);
	let query = decodedUrl.split('?')[1];
	let queryObj = {};
	if (query) {
		let queryArr = query.split('&');
		queryArr.forEach(item=> {
		 	let itemArr = item.split('=');
		 	queryObj[itemArr[0]] = itemArr[1];
		 })
	}
	console.log('處理url', queryObj)
	return queryObj;
}

//到這裡你已經擷取到了使用者經緯度 所選位址 所在城市等資訊 如果你想擷取更詳細的資訊 比如省、市、區、街道等等 可以通過騰訊地圖逆位址解析來擷取。 騰訊地圖這個接口是跨域的，可以前端處理也可以讓後端處理再傳回資料，我是使用jquery通過JSONP的方式處理，代碼如下
//逆解析騰訊地圖擷取到的位址 location參數是擷取到的經緯度
  	parseAddress(location) {
  		let data = {　　　　　
         key: "yourkey",
         get_poi: '1',
         location,
         output: 'jsonp'　　
  		}
      var url = `https://apis.map.qq.com/ws/geocoder/v1/`;
      let that = this;
      $.ajax({
          type: "get",
          dataType: 'jsonp',
          jsonp: "callback",
          jsonpCallback: "parseAddressSucc",
          url: url,
          data: data,
          success: function(res) {
          	console.log('成功')
          	const { address_component } = res.result;
          	//複制一份資料
          	const copyAddress = JSON.parse(JSON.stringify(that.address));
            copyAddress.province = address_component.province;
            copyAddress.city = address_component.city;
            copyAddress.area = address_component.district;
            copyAddress.address_details = address_component.street +  address_component.street_number;
            that.areas = [address_component.province, address_component.city , address_component.district];
            that.info = copyAddress;
              //業務處理
              console.log(res, '跨域資料')
          },
          error: function(err) {
              //業務處理
              console.log(err, '出錯')
          }

      });

           

2.在一個背景管理項目也需要用到選點元件的功能，這時使用頁面跳轉的方式就不太合适了，于是選擇iframe方式調用，src中的coord參數是設定地圖的中心點，在這個點會顯示一個marker。

<iframe
            id="myMap"
            width="100%"
            height="400px"
            frameborder=0
            :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=yourkey&referer=myapp&coord=${latLng}`"
          >
          </iframe>


window.addEventListener(
        "message",
        function(event) {
          // 接收位置資訊，使用者選擇确認位置點後選點元件會觸發該事件，回傳使用者的位置資訊
          var loc = event.data;
          if (loc && loc.module == "locationPicker") {
            //防止其他應用也會向該頁面post資訊，需判斷module是否為'locationPicker'
             //擷取了使用者選擇的位址資訊
          }
        },
        false
      );