vue3+ts如何给iframe地图组件添加点击事件完整代码

以下是一个示例代码，其中包含了如何在Vue3 TypeScript中给iframe地图组件添加点击事件：

<template>
  <div>
    <h2>My Map</h2>
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.885323754285!2d-74.0059416857297!3d40.71278474330322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sStatue%20of%20Liberty%20National%20Monument!5e0!3m2!1sen!2sus!4v1622681835423!5m2!1sen!2sus"
      width="600"
      height="450"
      style="border:0;"
      allowfullscreen=""
      loading="lazy"
      ref="myMap"
    ></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  mounted() {
    const myMap = this.$refs.myMap as HTMLIFrameElement;
    const mapDoc = myMap.contentDocument;
    mapDoc.addEventListener('click', () => {
      console.log('Map clicked!');
    });
  },
});
</script>

在这个示例中，我们首先在模板中定义了一个iframe元素，它包含了一个Google地图的嵌入式链接。我们为这个iframe元素添加了一个ref属性，以便我们可以在组件的mounted钩子中访问它。

在mounted钩子中，我们首先使用this.$refs.myMap来获取刚刚定义的iframe元素，并将其转换为HTMLIFrameElement类型。接下来，我们使用myMap.contentDocument来获取嵌入的Google地图的文档对象，然后添加一个点击事件监听器，当地图被点击时，它将在控制台上输出“Map clicked!”。

请注意，由于Google地图是在iframe中嵌入的，因此我们需要使用contentDocument属性来访问它的文档对象。如果我们直接使用myMap.document来访问文档对象，它将返回iframe元素的文档对象，而不是嵌入的Google地图的文档对象。