vue3使用腾讯地图前端定位组件iframe 监听位置信息代码实现

以下是一个使用 Vue3 和腾讯地图前端定位组件 iframe 监听位置信息的示例代码：

<template>
  <div>
    <iframe ref="mapFrame" src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY" @load="onMapLoad"></iframe>
    <p>当前位置：{{ location }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      location: ''
    }
  },
  mounted() {
    this.$refs.mapFrame.contentWindow.addEventListener('load', this.onMapLoad);
  },
  methods: {
    onMapLoad() {
      const map = this.$refs.mapFrame.contentWindow.qq.maps.Map.getMap(this.$refs.mapFrame);
      const geolocation = new this.$refs.mapFrame.contentWindow.qq.maps.Geolocation(map);
      geolocation.getLocation((position) => {
        this.location = position.addr;
      });
      this.$refs.mapFrame.contentWindow.addEventListener('message', (event) => {
        if (event.origin !== 'https://map.qq.com') return;
        if (event.data.type === 'location') {
          this.location = event.data.data.addr;
        }
      });
    }
  }
};
</script>

在上面的代码中，我们首先在模板中定义了一个 iframe 元素和一个展示当前位置的 `<p>` 元素。在 `mounted` 生命周期钩子中，我们监听了 iframe 的 `load` 事件，并在事件回调函数中获取了地图对象 `map` 和位置对象 `geolocation`，并且调用了 `getLocation()` 方法获取当前位置，并将其赋值给 `location` 数据属性。

同时，在回调函数中，我们还监听了 iframe 的 `message` 事件，用于接受来自 iframe 页面中的位置信息。当 iframe 页面中的位置信息发送过来时，我们会判断其来源是否正确，然后将位置信息赋值给 `location` 数据属性。

需要注意的是，为了保证安全性，我们在监听 `message` 事件时需要对消息来源进行验证，避免被恶意攻击。在上面的代码中，我们对消息来源进行了验证，只接受来自 https://map.qq.com 的消息。