如何在Google Map信息窗口中渲染Vue.js组件？

嘿，你当前的实现方式是不正确的——Google Maps的InfoWindow只会把你传入的字符串当作普通静态HTML解析，完全不会触发Vue的组件编译流程，所以你的<google-map-infowindow>自定义组件根本不会被Vue识别和渲染，最终只会显示成纯文本标签或者被忽略。

下面是两种主流Vue版本（Vue 2/Vue 3）下的正确实现思路和代码示例：

核心思路 #

1. 创建Vue组件的实例并手动挂载到一个临时DOM容器中
2. 将挂载后的真实DOM元素作为InfoWindow的content传入
3. 监听InfoWindow的关闭事件，销毁Vue实例/卸载应用，避免内存泄漏

Vue 2 实现示例 #

首先是你的自定义组件（比如GoogleMapInfowindow.vue）：

<template>
  <div class="infowindow-content">{{ content }}</div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.infowindow-content {
  padding: 8px 12px;
  font-size: 14px;
}
</style>

然后是在Google Map逻辑中调用的代码：

import Vue from 'vue'
import GoogleMapInfowindow from './GoogleMapInfowindow.vue'

// 假设这是你触发信息窗口打开的方法
openMarkerInfowindow(marker, mapInstance) {
  // 1. 创建临时DOM容器
  const tempContainer = document.createElement('div')

  // 2. 创建Vue组件实例并挂载到容器
  const vm = new Vue({
    render: h => h(GoogleMapInfowindow, {
      props: {
        content: 'Hello World'
      }
    })
  }).$mount(tempContainer)

  // 3. 初始化InfoWindow，传入挂载后的真实DOM
  this.current_infowindow = new google.maps.InfoWindow({
    content: vm.$el
  })

  // 4. 监听关闭事件，销毁Vue实例
  this.current_infowindow.addListener('closeclick', () => {
    vm.$destroy()
  })

  // 打开信息窗口
  this.current_infowindow.open(mapInstance, marker)
}

Vue 3 实现示例 #

如果你的项目用的是Vue 3，代码会略有不同（使用createAppAPI）：

import { createApp } from 'vue'
import GoogleMapInfowindow from './GoogleMapInfowindow.vue'

openMarkerInfowindow(marker, mapInstance) {
  const tempContainer = document.createElement('div')

  // 创建Vue应用实例并挂载
  const app = createApp(GoogleMapInfowindow, {
    content: 'Hello World'
  })
  const vm = app.mount(tempContainer)

  this.current_infowindow = new google.maps.InfoWindow({
    content: vm.$el
  })

  // 监听关闭事件，卸载应用
  this.current_infowindow.addListener('closeclick', () => {
    app.unmount()
  })

  this.current_infowindow.open(mapInstance, marker)
}

额外注意事项 #

• 如果你的组件需要响应式更新内容，可以通过Vue实例的$props或者直接修改组件内部数据（如果用的是ref/data）来实现
• 记得在组件销毁/卸载时清理所有自定义事件监听，避免潜在的内存泄漏问题

内容的提问来源于stack exchange，提问作者SagunKho