Vue实现地图选点功能，类似微信发送位置

遇到一个需求，需要用到类似微信发送位置选取位置的功能，看了高德地图的vue-amap文档，真是没法看呀

后选定腾讯地图 官方文档

地图组件

<template>
  <div class="map">
    <van-nav-bar left-arrow left-text="返回" title="选择地址" @click-left="$emit('hideMap')" />
    <iframe id="mapPage" width="100%" height="100%" frameborder=0 :src="getSrc">
    </iframe>
  </div>
</template>

<script>
export default {
  name: 'TxMap',
  data() {
    return {
      keyName: '你的应用key名称',
      mapKey: '你的应用key',
    }
  },
  computed: {
    getSrc() {
      return 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=' + this.mapKey + '&referer=' + this.keyName
    }
  },
  mounted() {
    let self = this
    window.addEventListener('message', function(event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      const loc = event.data;
      if (loc && loc.module === 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        self.$emit('callback', loc)
      }
    }, false)
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>

使用

<van-popup v-model="showMap" position="right" :style="{ height: '100%',width:'100%' }">
      <tx-map @callback="callback" @hideMap="showMap = false"></tx-map>
</van-popup>