vue 腾讯地图地图选点组件iframe调用 反显地点 代码

你好，以下是一个简单的示例代码，可以在 Vue 中使用腾讯地图 API 实现地图选点和反显地点：

<template>
  <div>
    <iframe ref="mapIframe" :src="mapUrl" @load="onMapIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapUrl: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=YOUR_KEY_HERE&referer=YOUR_REFERER_HERE',
      selectedLocation: null
    }
  },
  methods: {
    onMapIframeLoad() {
      // 在 iframe 中添加选点完成后的回调函数
      const mapIframe = this.$refs.mapIframe
      const mapIframeWindow = mapIframe.contentWindow
      mapIframeWindow.setSearchCompleteCallback(() => {
        const location = mapIframeWindow.getPoint()
        this.selectedLocation = location
        console.log('selected location:', location)
      })

      // 如果需要反显已选地点，可以在此处设置经纬度
      const selectedLocation = this.selectedLocation
      if (selectedLocation) {
        mapIframeWindow.setPoint(selectedLocation)
      }
    }
  }
}
</script>

请将 `YOUR_KEY_HERE` 和 `YOUR_REFERER_HERE` 替换为你的腾讯地图 API 密钥和 referer，具体用法请参考腾讯地图 API 的官方文档。此外，由于涉及到跨域问题，需要在 API 密钥管理中添加允许跨域访问的域名。