7.7 Vue项目接入指南
适用版本：ElaneMap H5 API 3.5
前置阅读：7.1-快速入门、7.2-地图引擎基础
适用读者：使用 Vue2 / Vue3 技术栈（vue-cli、Vite 等）的开发接入人员
一、为什么 Vue 项目需要特殊处理
1.
npm install 后 import，只能通过 <script> 标签远程加载；2.
window 上，暴露 ShipxyAPI、Leaflet 全局对象 L，并依赖其自带的 jQuery；3.
new ShipxyAPI.Map(...)，而 Vue 组件的生命周期与脚本异步加载时序需要手动协调；4.
二、方式一（推荐）：index.html 静态引入 + 组件封装
2.1 在 index.html 中引入
public/index.html（vue-cli / Vite 项目根目录的 index.html）的 <head> 中加入：2.2 封装地图组件 ShipxyMap.vue（Vue3 组合式 API 示例）
2.3 在页面中使用
2.4 Vue2 选项式 API 写法
三、方式二：组件内动态加载脚本
3.1 封装脚本加载工具 loadShipxyApi.js
3.2 在组件中使用
四、方式三：密钥由后端下发（推荐用于生产环境）
注意：密钥经后端下发到浏览器后仍然可见，此方式只解决"密钥不硬编码进代码仓库"的问题，不能替代域名绑定等防护措施，详见 08 篇。
五、Vue 接入的关键注意事项
5.1 不要把地图实例放进响应式数据
5.2 容器尺寸问题
onMounted 时已有确定宽高（CSS 显式指定）；map.invalidateSize() 强制重算尺寸。5.3 路由切换与资源释放
onBeforeUnmount（Vue3）/ beforeDestroy（Vue2）中：1.
map.remove() 销毁地图；2.
setInterval 定时器也要一并 clearInterval）；3.
5.4 jQuery 冲突
window.$。若项目自身也使用 jQuery（较少见），注意加载顺序，必要时用 jQuery.noConflict() 处理。Vue 项目本身不依赖 jQuery，一般无冲突。5.5 类型提示（可选）
六、常见问题 FAQ
ShipxyAPI is not defined？A：脚本尚未加载完成就初始化了地图。用方式二的 Promise 等待加载完成，或确认 index.html 中 script 标签位置正确且无网络拦截。
A：依次检查：容器是否有实际宽高； 密钥是否替换为真实 Key（
?k= 和 ak 两处）；浏览器控制台是否有瓦片请求 403（密钥无效或未绑定域名）。A：上次的地图实例没有被
remove()，同一容器重复初始化导致。检查 5.3 节的资源释放逻辑。A：容器尺寸在初始化后发生了变化，调用
map.invalidateSize()（Leaflet 原生方法）刷新。A：地图实例被放进了响应式系统，devtools 会尝试递归序列化它。按 5.1 节改为非响应式保存。
A：keep-alive 场景组件不会销毁，改用
activated 中 map.invalidateSize() 恢复显示，deactivated 中可选择暂停船位自动刷新等业务定时器。