企业官网建设流程全解析

1. 问题背景与核心痛点拆解

1.1 为什么 infoWindow 的事件绑定这么别扭

用过高德地图 JS API 的人都有一个共同感受：地图本身好用，但一旦涉及到InfoWindow（信息窗口）里的交互，事情就变得不那么顺手了。原因很简单——InfoWindow的内容是原生 DOM 或者 HTML 字符串，它游离在 Vue 的响应式系统之外。你在content里写了一个按钮，想让它点击后触发 Vue 组件里的某个方法，结果发现this指向不对，或者根本拿不到组件实例。

这个问题的本质是：高德地图的 InfoWindow 是一个独立的 DOM 容器，它由地图 SDK 自己管理和渲染，Vue 的模板编译和事件系统管不到它。你在 Vue 的<template>里写@click是没用的，因为那段 HTML 压根不经过 Vue 的编译器。

我在实际项目里踩过这个坑。当时做一个门店管理系统，点击地图标记弹出信息窗口，窗口里有个"查看详情"按钮，需要跳转到 Vue Router 的详情页。最开始我直接在content字符串里写onclick="goDetail()"，把goDetail挂到window上——能用，但极其丑陋，而且多个组件之间会互相污染全局函数名。

后来换成addEventListener手动绑定，又遇到新问题：事件回调里的this不是 Vue 实例，拿不到router、store、组件data。再后来尝试用Vue.extend动态创建组件实例挂载到 InfoWindow 的 DOM 上，这才算找到了正路。

1.2 三种主流方案的取舍逻辑

在动手之前，先把可选路径理清楚。根据我的经验，处理 InfoWindow 交互事件挂载到 Vue 实例，主流有三种思路：

我最终推荐的是第三种方案，但它也不是银弹。如果你的 InfoWindow 里就一个静态文本加一个关闭按钮，用第二种方案反而更轻量。选型的关键判断标准是：InfoWindow 里的内容是否需要访问 Vue 组件的响应式数据、路由、状态管理，以及是否需要动态更新。如果需要，就上动态组件实例；如果只是静态展示加简单回调，手动绑定就够了。

1.3 前置知识：Vue3 的 createApp 与 createVNode 区别

在 Vue3 里，动态创建组件实例有两个 API 可以用：createApp和createVNode+render。这两个的区别直接影响你的实现方式。

createApp会创建一个独立的应用实例，拥有自己的上下文。这意味着它和主应用的router、store、全局组件注册是隔离的。如果你在 InfoWindow 组件里想用useRouter()，会发现拿不到主应用的路由实例。解决办法是通过app.use(router)手动注入，或者用app.provide()传递依赖。

createVNode+render则是把组件渲染到指定容器，它共享主应用的上下文（如果你在同一个应用内调用）。但render函数需要你手动管理卸载，否则会造成内存泄漏。

我个人的选择是：如果 InfoWindow 组件需要用到路由和全局状态，用createApp并手动注入依赖；如果只是纯展示加本地状态，用createVNode+render更轻便。下面会分别给出两种方案的完整代码。

2. 环境准备与基础地图集成

2.1 高德地图 JS API 的加载方式选择

在 Vue3 项目里引入高德地图，有两种常见方式：直接在 index.html 里用 script 标签加载，或者用 @amap/amap-jsapi-loader 动态加载。我强烈推荐后者，原因有三：第一，避免全局变量污染；第二，可以控制加载时机，等地图 SDK 就绪后再初始化组件；第三，配合 TypeScript 时类型声明更好处理。

安装 loader：

npm install @amap/amap-jsapi-loader --save

然后在组件里这样用：

import AMapLoader from '@amap/amap-jsapi-loader' const map = shallowRef(null) const AMap = shallowRef(null) const initMap = async () => { AMap.value = await AMapLoader.load({ key: '你的Key', version: '2.0', plugins: ['AMap.InfoWindow', 'AMap.Marker'] }) map.value = new AMap.value.Map('map-container', { zoom: 12, center: [116.397428, 39.90923] }) }

这里有个细节：map和AMap用shallowRef而不是ref。因为地图实例是一个庞大的对象，用ref会深度递归代理，性能极差，甚至可能报错。shallowRef只代理顶层，不碰内部属性，这是 Vue3 集成第三方库的标准做法。

注意：高德地图的 Key 需要配合安全密钥使用。在 2021 年之后申请的 Key，必须在加载前设置window._AMapSecurityConfig，否则会报INVALID_USER_SCODE错误。这个坑我见过太多人踩了。

2.2 InfoWindow 的基本创建与内容渲染

创建一个最简单的 InfoWindow：

const infoWindow = new AMap.value.InfoWindow({ content: '<div class="info-content">这是默认内容</div>', offset: new AMap.value.Pixel(0, -30) }) // 在某个位置打开 infoWindow.open(map.value, [116.397428, 39.90923])

content支持 HTML 字符串，也支持直接传入 DOM 元素。如果你传入 DOM 元素，高德会把它插入到自己的容器里。这个特性是后面动态挂载 Vue 组件的基础——我们可以先创建一个空的div，传给 InfoWindow，然后在这个div上挂载 Vue 组件。

但这里有个时机问题：InfoWindow 的 DOM 只有在open之后才会真正插入到页面中。如果你在open之前就试图往容器里挂载组件，组件会渲染到一个游离的 DOM 上，等 InfoWindow 打开时，高德可能会重新创建容器，导致你的组件丢失。所以正确的顺序是：先open，再在open的回调或nextTick后挂载组件。

2.3 项目目录结构与组件划分建议

一个清晰的结构能让后续维护轻松很多。我通常这样组织：

src/ components/ MapContainer.vue // 地图容器组件 InfoWindowContent.vue // InfoWindow 内部内容组件 composables/ useAMap.js // 地图初始化逻辑 useInfoWindow.js // InfoWindow 管理逻辑 utils/ amapLoader.js // 地图 SDK 加载封装

把 InfoWindow 的内容单独抽成一个 Vue 组件，好处是它可以正常使用<script setup>、computed、watch，甚至useRouter。地图容器组件只负责创建和管理 InfoWindow 实例，内容组件只负责 UI 和交互逻辑，职责分离。

3. 核心方案：动态组件实例挂载到 InfoWindow

3.1 方案一：createApp 独立应用实例

这个方案的核心思路是：为每个 InfoWindow 创建一个独立的 Vue 应用实例，把内容组件挂载到 InfoWindow 的容器 DOM 上。

先写 InfoWindow 的内容组件：

<!-- InfoWindowContent.vue --> <template> <div class="info-window"> <h3>{{ title }}</h3> <p>{{ description }}</p> <button @click="handleDetail">查看详情</button> <button @click="handleClose">关闭</button> </div> </template> <script setup> import { useRouter } from 'vue-router' const props = defineProps({ title: String, description: String, id: [String, Number] }) const emit = defineEmits(['close']) const router = useRouter() const handleDetail = () => { router.push(`/detail/${props.id}`) } const handleClose = () => { emit('close') } </script>

然后在父组件里动态创建：

import { createApp } from 'vue' import InfoWindowContent from './InfoWindowContent.vue' import router from '@/router' import store from '@/store' let infoWindowApp = null const openInfoWindow = (position, data) => { // 先关闭已有的 if (infoWindowApp) { infoWindowApp.unmount() infoWindowApp = null } const container = document.createElement('div') const infoWindow = new AMap.value.InfoWindow({ content: container, offset: new AMap.value.Pixel(0, -30) }) infoWindow.open(map.value, position) // 关键：等 DOM 插入后再挂载 nextTick(() => { infoWindowApp = createApp(InfoWindowContent, { title: data.title, description: data.description, id: data.id, onClose: () => { infoWindow.close() infoWindowApp.unmount() infoWindowApp = null } }) infoWindowApp.use(router) infoWindowApp.use(store) infoWindowApp.mount(container) }) }

这里有几个关键点需要展开说。

第一，为什么要用nextTick？因为infoWindow.open()之后，高德会把container插入到地图的 DOM 树中。虽然container本身是我们创建的，但它的位置和上下文在open之后才确定。如果在open之前就mount，组件会渲染，但可能在高德重新组织 DOM 时被影响。用nextTick确保 DOM 更新完成后再挂载，是最稳妥的做法。

第二，为什么要手动use(router)和use(store)？因为createApp创建的是一个全新的应用实例，它和主应用是隔离的。主应用里app.use(router)注册的路由，在这个新实例里不存在。所以必须手动注入。如果你用了 Pinia，同理需要app.use(pinia)。

第三，卸载时机很重要。每次打开新的 InfoWindow 之前，先卸载旧的实例，否则会造成内存泄漏。在onClose回调里也要卸载。我见过有人忘记卸载，反复打开关闭几十次后页面卡死，就是因为每次createApp都创建了新的响应式系统和组件树，旧的一直没释放。

3.2 方案二：createVNode + render 共享上下文

如果你不想管理独立的应用实例，可以用createVNode+render：

import { createVNode, render, nextTick } from 'vue' import InfoWindowContent from './InfoWindowContent.vue' let vnode = null const openInfoWindow = (position, data) => { const container = document.createElement('div') const infoWindow = new AMap.value.InfoWindow({ content: container, offset: new AMap.value.Pixel(0, -30) }) infoWindow.open(map.value, position) nextTick(() => { vnode = createVNode(InfoWindowContent, { title: data.title, description: data.description, id: data.id, onClose: () => { infoWindow.close() render(null, container) vnode = null } }) // 共享主应用上下文 vnode.appContext = app._context render(vnode, container) }) }

这个方案的关键在于vnode.appContext = app._context。这行代码让新创建的 VNode 共享主应用的上下文，包括全局组件、指令、provide/inject 等。这样 InfoWindow 组件里就能直接用useRouter()了，不需要手动注入。

但要注意：app._context是内部属性，虽然目前稳定，但严格来说不是公开 API。如果你追求绝对稳定，还是用方案一更保险。方案二的优势是轻量，不需要创建新的应用实例，卸载也更简单——render(null, container)就够了。

3.3 两种方案的性能对比与选型建议

我做过一个简单的测试：在同一个页面上反复打开关闭 InfoWindow 各 100 次，记录内存占用和耗时。

从数据看，createVNode+render在性能上略优，因为它不需要创建新的应用实例和响应式系统。但createApp的隔离性更好，适合 InfoWindow 内容需要独立状态管理的场景。

我的选型建议是：如果 InfoWindow 组件需要用到路由、全局状态，且你希望它和主应用完全解耦，用 createApp；如果只是简单展示加回调，且追求轻量，用 createVNode + render。在实际项目中，我大多数时候用的是方案二，因为 InfoWindow 的内容通常不复杂，共享上下文反而更方便。

4. 实操全流程：从点击标记到窗口交互

4.1 标记点创建与点击事件绑定

先创建标记点，并绑定点击事件：

const createMarker = (item) => { const marker = new AMap.value.Marker({ position: [item.lng, item.lat], title: item.name, extData: item // 把数据挂到标记上 }) marker.on('click', (e) => { const data = e.target.getExtData() openInfoWindow([data.lng, data.lat], data) }) map.value.add(marker) return marker }

extData是高德 Marker 提供的一个自定义数据挂载点，你可以把任意数据塞进去，在事件回调里通过getExtData()取出来。这比用闭包捕获变量更可靠，尤其是在循环创建多个标记时，闭包容易出问题。

4.2 InfoWindow 打开与组件挂载的完整时序

把整个流程串起来，时序是这样的：

1. 用户点击标记
2. 触发marker.on('click')回调
3. 从extData取出数据
4. 调用openInfoWindow(position, data)
5. 创建容器div
6. 创建 InfoWindow 实例，传入容器
7. 调用infoWindow.open(map, position)
8. nextTick等待 DOM 插入
9. 创建 VNode 或 App 实例
10. 挂载到容器
11. 用户点击"查看详情"，触发路由跳转
12. 用户点击"关闭"，触发onClose，卸载组件，关闭窗口

这个时序里最容易出问题的是第 7 到第 9 步之间。如果你在open之前就挂载，组件可能渲染到游离 DOM 上；如果你在open之后立即挂载而不等nextTick，可能容器还没被高德处理完。我实测下来，nextTick是最小等待单位，如果遇到极端情况（比如地图动画中打开窗口），可以用setTimeout(fn, 0)再包一层。

4.3 关闭窗口时的资源清理

资源清理是很多人忽略的环节。每次打开 InfoWindow 都会创建一个新的组件实例，如果不清理，就会累积。完整的清理逻辑应该包括：

const closeInfoWindow = () => { if (infoWindow) { infoWindow.close() infoWindow = null } if (vnode) { render(null, container) vnode = null } container = null }

在组件的onUnmounted里也要调用这个清理函数，防止组件销毁后 InfoWindow 还挂着。

实操心得：我习惯在openInfoWindow函数开头先调用一次closeInfoWindow()，确保每次打开都是干净的状态。这样即使外部有遗漏的关闭逻辑，也不会出现多个窗口叠加。

5. 常见问题与排查技巧实录

5.1 事件回调里 this 指向丢失怎么办

这是最常见的问题。在addEventListener的回调里，this默认指向触发事件的 DOM 元素，而不是 Vue 实例。解决办法有三种：

• 用箭头函数定义回调，箭头函数不绑定自己的this，会捕获外层的this
• 用bind手动绑定：handler.bind(vm)
• 把逻辑写在 Vue 组件的方法里，通过组件实例调用

我推荐第一种，最简洁。但要注意，箭头函数在addEventListener里不能用于需要removeEventListener的场景，因为每次创建的箭头函数引用不同，无法移除。如果需要在关闭时移除监听，就得用bind或者把函数引用存起来。

5.2 InfoWindow 内容不更新或闪烁

有时候你更新了数据，但 InfoWindow 里的内容没变。这是因为 InfoWindow 的content在创建时就确定了，后续修改数据不会自动触发重新渲染。解决办法是：不要直接修改数据，而是重新设置 content 或重新打开窗口。

// 错误做法：只改数据 data.title = '新标题' // InfoWindow 不会更新 // 正确做法：重新设置 content infoWindow.setContent(newContainer) // 或者关闭后重新打开

如果你用的是动态组件方案，组件内部的响应式数据变化会自动更新 DOM，因为组件实例还在。但如果你用的是 HTML 字符串方案，就必须手动更新。

闪烁问题通常是因为setContent后高德重新计算了窗口大小和位置。可以在setContent之前先close，设置完再open，虽然会闪一下，但位置更准确。

5.3 多个 InfoWindow 同时打开的管理策略

高德地图默认允许同时打开多个 InfoWindow。如果你希望一次只显示一个，需要自己维护一个当前打开的实例引用：

let currentInfoWindow = null const openInfoWindow = (position, data) => { if (currentInfoWindow) { currentInfoWindow.close() currentInfoWindow = null } // ... 创建新的 currentInfoWindow = infoWindow }

如果业务需要同时显示多个，那就用数组或 Map 来管理，每个标记对应一个 InfoWindow 实例。但要注意，同时打开太多窗口会影响性能，建议超过 5 个就考虑用聚合或其他展示方式。

5.4 常见问题速查表

5.5 独家避坑技巧

技巧一：用 WeakMap 管理实例映射。如果你有多个标记对应多个 InfoWindow，用WeakMap以标记对象为键，存储对应的 InfoWindow 和组件实例。这样当标记被移除时，关联的实例可以被垃圾回收，不需要手动清理。

技巧二：在 InfoWindow 组件里用onMounted而不是nextTick。如果你用动态组件方案，组件内部的onMounted会在挂载完成后触发，这比外层的nextTick更可靠。可以把需要 DOM 的操作放在组件的onMounted里。

技巧三：给 InfoWindow 容器加一个唯一类名。方便在调试时快速定位，也方便写样式。比如info-window-${Date.now()}，虽然不美观，但排查问题时很有用。

技巧四：移动端要处理点击延迟。在移动端，click事件有 300ms 延迟。如果 InfoWindow 里的按钮响应慢，可以用touchstart替代，或者引入fastclick库。不过现代浏览器大多已经移除了这个延迟，实测下来只有在某些旧版 WebView 里才需要处理。

6. 进阶优化与扩展思路

6.1 用 Teleport 把 InfoWindow 内容传送到地图容器

Vue3 的Teleport可以把组件内容渲染到任意 DOM 节点。虽然不能直接解决 InfoWindow 的问题（因为 InfoWindow 的容器是动态创建的），但可以用在另一个场景：把 InfoWindow 的内容渲染到地图容器外部的固定面板里，实现"点击标记，右侧面板显示详情"的效果。

<Teleport to="#detail-panel"> <InfoWindowContent v-if="selectedData" :data="selectedData" /> </Teleport>

这种方式完全避开了 InfoWindow 的 DOM 管理问题，交互体验也更适合桌面端。如果你的业务允许，我强烈推荐这种方案——把复杂交互从地图窗口里拿出来，放到独立的 UI 区域。

6.2 封装成 composable 复用

把 InfoWindow 的管理逻辑封装成一个 composable：

// useInfoWindow.js import { shallowRef, nextTick } from 'vue' import { createVNode, render } from 'vue' export function useInfoWindow(AMap, map) { const currentVNode = shallowRef(null) const currentContainer = shallowRef(null) const open = (position, component, props) => { close() const container = document.createElement('div') const infoWindow = new AMap.InfoWindow({ content: container, offset: new AMap.Pixel(0, -30) }) infoWindow.open(map.value, position) nextTick(() => { const vnode = createVNode(component, { ...props, onClose: () => { infoWindow.close() render(null, container) } }) vnode.appContext = app._context render(vnode, container) currentVNode.value = vnode currentContainer.value = container }) } const close = () => { if (currentVNode.value) { render(null, currentContainer.value) currentVNode.value = null currentContainer.value = null } } return { open, close } }

这样在任何组件里都可以const { open, close } = useInfoWindow(AMap, map)，然后open(position, MyContent, { title: 'xxx' })。逻辑复用，代码干净。

6.3 性能优化：避免重复创建组件实例

如果你的 InfoWindow 内容组件很复杂，每次打开都创建新实例会有性能开销。可以考虑缓存组件实例，只更新 props：

let cachedVNode = null const open = (position, props) => { if (!cachedVNode) { cachedVNode = createVNode(InfoWindowContent, props) } else { // 更新 props Object.assign(cachedVNode.component.props, props) } // ... }

但这种方式需要小心处理，因为 VNode 的复用涉及 diff 算法，如果 props 结构变化大，可能不如重新创建。我一般只在内容组件特别重（比如包含大量图表）时才用缓存，普通场景下重新创建的开销可以忽略。

6.4 与 Vue Router 的深度集成

如果 InfoWindow 里的按钮需要跳转路由，除了在组件里用useRouter()，还可以用router.push的编程式导航。但要注意，跳转后如果地图组件被销毁，InfoWindow 也要跟着关闭。可以在路由守卫里处理：

router.beforeEach((to, from, next) => { // 关闭所有 InfoWindow closeAllInfoWindows() next() })

或者在组件的onBeforeUnmount里清理。我倾向于后者，因为更精准，不会影响其他页面的地图。

6.5 服务端渲染（SSR）场景下的注意事项

如果你的项目用了 SSR（比如 Nuxt），高德地图只能在客户端加载。AMapLoader.load必须放在onMounted里，不能在setup顶层调用。createApp和createVNode也要确保在客户端执行。否则会报window is not defined。

另外，SSR 下document.createElement不可用，所以 InfoWindow 的容器创建也要延迟到客户端。可以用import.meta.client或process.client判断环境。

7. 个人实操体会与建议

我在多个项目里用过上面这些方案，踩过的坑总结下来就几条。第一，不要试图用 HTML 字符串加全局函数的方式偷懒，后期维护成本极高，尤其是多人协作时，全局函数名冲突是迟早的事。第二，动态组件方案虽然代码多一点，但换来的是完整的 Vue 开发体验，响应式、路由、状态管理都能用，长期看是划算的。第三，资源清理一定要做，我见过太多项目因为忘记卸载 InfoWindow 组件导致内存泄漏，页面开久了就卡。

如果你刚开始接触这个需求，我的建议是先用createVNode+render方案跑通流程，理解清楚 DOM 挂载时机和上下文共享的原理，然后再根据项目需要决定是否换成createApp。两种方案的代码我都放在上面了，直接抄改就能用。

最后分享一个小技巧：在开发阶段，给 InfoWindow 的容器加一个红色边框，方便肉眼确认容器位置和大小。等调试完了再去掉。这个笨办法帮我省了很多猜测的时间。