腾讯地图选址组件

最近做的微信移动端项目，刚好有选地址的功能，就用了腾讯地图的选址组件

通过iframe内嵌调用没有弹出地理位置授权框，需要自己调用微信地理位置授权，获取到当前经纬度，赋值给lat和lng就可以了，这里写的是默认的经纬度。之前用的是backurl调用的，会跳转页面，需要把有些数据放url上带过去再带回来，很麻烦，后面改用iframe

<div @click="selMap">选择地址: {{addr}}</div>
<!-- 移动端腾讯地图选址组件引入iframe -->
<div class="map"
      v-if="isMap">
  <iframe id="mapPage"
          width="100%"
          height="100%"
          frameborder=0
          :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&coord=${lat},${lng}&key=FDRBZ-2T7RI-J5MGG-5OOCF-7D7KQ-N4FDM&referer=myapp`">
  </iframe>
</div>

export default {
  name: 'Home',
  data () {
    return {
      isMap: false,
      lat: 24.44579,
      lng: 118.08243,
      addr: ''
    }
  },
  created () {
  },
  methods: {
    selMap () {
      this.isMap = true
      let that = this
      window.addEventListener('message', function (event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data
        if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          that.addr = loc.poiname === '我的位置' ? loc.addr : loc.poiname
          that.lat = loc.latlng.lat
          that.lng = loc.latlng.lng
          that.isMap = false
        }
      }, false)
    }
  },
  components: {
  }
}