腾讯地图踩坑记之选点组件

最近遇到一个需求，h5页面用户新增地址的时候除了可以调起级联菜单弹窗进行选择也可以点击图标进入地图进行选择，如下图：

我们用的是腾讯地图，要使用腾讯地图功能首先要组册key完成验证，这个按照文档一步一步来就可以了，完成之后需要进行一些设置，就我这个选点组件而言就必须开启 WebServiceAPI，否则无法使用相应的地图功能。

腾讯地图选点组件，用起来还是挺方便的，使用方式有两种：一种是使用iframe内嵌调用；还有一种是通过<a>标签直接跳转一个新的地图页面。iframe嵌入不是很好用，于是选了第二种。通过页面跳转的方式调用该组件的时候，需要设置backurl参数，用户点击选中的位置点后，页面跳转至开发者指定的返回地址（backurl），并将位置信息添加到回跳地址（backurl）上，具体使用可查看文档。我是使用vue框架开发的，具体实现代码如下：
 

//1.<tempalte>中
<a :href="href" @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
      );