谷歌地图标记弹窗内NuxtLink无法渲染为有效链接的问题咨询

Google Maps 信息窗口（InfoWindow）仅支持渲染纯HTML字符串，而NuxtLink是Vue组件，无法被浏览器直接解析为可交互的链接，只能被当作普通文本标签显示。

方案一：原生a标签 + Nuxt路由跳转（简单直接） #

用原生<a>标签替代NuxtLink，通过手动调用Nuxt路由方法实现平滑跳转，无需依赖Vue组件解析。

代码修改： #

1. 替换弹窗内容中的NuxtLink：

createMarker({
  lat: doc.lat,
  lng: doc.lng,
  content: `<div class="mapPopMarker-content">
            <div class="inner-content">
              ${doc.name ? '<div class="name">'+ doc.name +'</div>' : ''}
              ${doc.address ? '<div class="address">'+ doc.address +'</div>' : ''}
              <a href="/companies/${doc.id}" class="link" onclick="handleMapLinkClick(event, '${doc.id}')">View</a>
            </div>
            </div>`
})

2. 在组件或全局注册路由跳转方法：

// Nuxt 2 写法（可放在组件的mounted钩子中）
window.handleMapLinkClick = function(event, id) {
  event.preventDefault()
  this.$router.push(`/companies/${id}`)
}.bind(this)

// Nuxt 3 写法（可放在客户端插件或组件的onMounted中）
import { useRouter } from 'vue-router'
window.handleMapLinkClick = function(event, id) {
  event.preventDefault()
  const router = useRouter()
  router.push(`/companies/${id}`)
}

方案二：手动挂载Vue组件到弹窗（适合复杂场景） #

如果弹窗需要更多Vue功能（如响应式数据、其他组件嵌套），可以创建独立的Vue组件，在弹窗打开时手动挂载到DOM中。

步骤1：创建弹窗组件 #

<!-- components/MapPopupContent.vue -->
<template>
  <div class="mapPopMarker-content">
    <div class="inner-content">
      <div class="name" v-if="name">{{ name }}</div>
      <div class="address" v-if="address">{{ address }}</div>
      <NuxtLink :to="`/companies/${id}`" class="link">View</NuxtLink>
    </div>
  </div>
</template>

<script setup>
defineProps({
  name: String,
  address: String,
  id: [String, Number]
})
</script>

步骤2：修改标记创建逻辑 #

import MapPopupContent from '@/components/MapPopupContent.vue'
import { createApp } from 'vue' // Nuxt 3 用此方法；Nuxt 2 用 Vue.extend

function createMarker({ lat, lng, doc }) {
  const marker = new google.maps.Marker({ position: { lat, lng }, map })
  const infoWindow = new google.maps.InfoWindow()

  marker.addListener('click', () => {
    // 先插入空容器
    infoWindow.setContent('<div id="map-popup-container"></div>')
    infoWindow.open(map, marker)

    // 等待弹窗DOM渲染完成后挂载组件
    setTimeout(() => {
      const container = document.getElementById('map-popup-container')
      if (!container) return

      // 创建并挂载组件
      const app = createApp(MapPopupContent, {
        name: doc.name,
        address: doc.address,
        id: doc.id
      })
      app.mount(container)

      // 弹窗关闭时销毁组件，避免内存泄漏
      google.maps.event.addListener(infoWindow, 'closeclick', () => {
        app.unmount()
      })
    }, 0)
  })
}

• Nuxt 2 和 Nuxt 3 的Vue实例创建、路由获取API存在差异，需根据版本调整代码。
• 方案二中的setTimeout是为了等待Google Maps完成弹窗DOM的渲染，确保能获取到挂载容器。

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