vue 和 elementUI 这套组合在中后台项目里的占有率有多高做过几个管理系统的同学心里都有数。而地图这个东西几乎每个跟门店、车辆、设备、工单、配送沾边的后台都躲不开门店分布要打点车辆要跑轨迹设备要按区域聚合工单要圈选范围这时候腾讯地图就成了绕不开的一块拼图。麻烦的地方在于vue 的组件生命周期和地图 SDK 的命令式 API 是两套思路elementUI 的弹窗、Tab、表格又都会影响地图容器的尺寸计算稍不留神就是一片白板或者地图挤在一个 0 像素高的 div 里。这篇东西主要聊的就是我这几年前前后后踩下来的一套做法从 key 怎么申请、白名单怎么配到脚本怎么加载才不拖累首屏再到标记聚合、信息窗口里塞 elementUI 组件、地址搜索与表单回填、组件销毁时的内存清理最后是那一堆让人头大的故障排查。适合已经能写 vue 表单和列表、但没怎么碰过地图 SDK 的同学也适合已经做完一版、正被白屏和卡顿折磨的同学。代码以 Vue 2 Element UI 为主线Vue 3 Element Plus 的差异我会单独标出来。1. 地图选型为什么在 Vue 项目里挑了腾讯位置服务1.1 三家常被拿来对比的地图服务先把选型这块说清楚因为后面所有的坑都和这个选择有关。国内能用的 Web 端地图服务就那么几家我在不同项目里都用过横向摆一下会更直观对比维度腾讯位置服务高德开放平台百度地图开放平台坐标体系GCJ-02GCJ-02BD-09自家加密GL 版渲染有JS API GL有有与微信生态打通好小程序同源一般一般服务类接口风格Promise 化写法接近 axios回调 Promise 双形态回调为主主题定制支持样式 ID 定制底图支持支持坐标体系这一栏最值得盯。腾讯和高德都是 GCJ-02数据在两个平台之间迁移时基本不用转换百度用的是自家的 BD-09如果你从百度换到腾讯几十万条存量坐标就得全量纠偏一次这个工作量在项目中期是很要命的。我遇到过最惨的一次是历史数据存的是百度坐标换平台后所有点整体偏了几百米排查了一整天才反应过来是坐标系的问题。另一个让我倾向腾讯的点是服务类接口的写法。它的TMap.service.Geocoder这类对象直接返回 Promise配合async/await写起来跟调自己的后端接口没什么区别不用再包一层回调转 Promise 的壳子。这一点在 vue 项目里特别顺手因为组件的async mounted里可以直接串起来写代码读起来是一条线不是一堆.then嵌套。1.2 Vue 技术栈下地图 SDK 的适配成本选型只是第一步真正决定开发体验的是地图 SDK 和 vue 的磨合方式。地图 SDK 是典型的命令式 APInew TMap.Map(...)拿到实例然后不断调方法改状态。而 vue 是声明式的数据变了视图自己跟着变。这两套东西硬凑在一起最容易出的问题就是「我改了 data地图没反应」。我的应对原则是地图实例本身不进响应式系统。Vue 2 里如果你把地图实例塞进dataVue 会递归遍历这个对象的所有属性给它们全部挂上getter/setter而地图实例内部挂着几百上千个 DOM 节点和几何对象引用这一圈遍历下来初始化就会慢一大截后续 SDK 内部的每次属性读写都要过一遍拦截缩放和拖动会明显发涩。正确做法是挂在组件实例的非响应式属性上// Vue 2以下划线开头、且不在 data 中声明的属性不会被响应式处理 export default { data() { return { shops: [], // 这些是要驱动视图的数据正常放 data activeShop: null }; }, created() { this._map null; // 地图实例刻意避开响应式 this._markerLayer null; } };// Vue 3用 shallowRef 或 markRaw 显式声明不追踪 import { shallowRef, markRaw } from vue; const mapRef shallowRef(null); const markerLayer shallowRef(null); function initMap(TMap) { const map new TMap.Map(document.getElementById(map-container), { /* ... */ }); mapRef.value markRaw(map); }第二个适配点是生命周期对齐。地图必须在 DOM 已经渲染完成之后才能初始化所以初始化放在mounted而销毁必须放在beforeDestroyVue 3 是beforeUnmount并且要显式调用地图的销毁方法否则路由切换十几次之后你会发现页面越来越卡chrome 的任务管理器里这个标签页的内存曲线一路向上不回头。第三个点是响应式和地图的双向同步。业务数据变了要更新地图上的点地图上点了某个点又要回写到业务数据。我的做法是单向为主业务数据是唯一真相来源地图只做渲染层。用户点地图上的标记时先找到对应的业务数据对象、更新数据再写一个watch监听数据变化、整体重绘地图上的几何对象。这样逻辑只有一个入口不会出现「地图显示的和列表里的不一致」这类玄学问题。2. 动手前必须搞定的三件事Key、域名白名单、依赖形态2.1 Key 的申请与配额策略腾讯位置服务的 key 在控制台里创建流程不复杂但有几个地方新手特别容易踩。第一步是注册开发者账号个人和企业都能用区别主要在配额和服务范围上。第二步是新建应用一个应用下可以挂多个 key。第三步是给 key 勾选服务类型这一步最关键如果你要用地址解析、关键词搜索、路线规划这类服务类接口必须勾选 WebServiceAPI只勾了 JavaScript API GL 是不够的调用服务接口时会直接返回权限错误。我见过太多人卡在这里地图能显示、就是搜不到地址查半天代码最后发现是 key 少勾了一个选项。第四步是按需管理配额。控制台里有每个 key 的日调用量统计建议一个业务场景配一个 key比如 Web 端展示一个、服务端批量解析一个。混用一个 key 的后果是调用量一超全部业务一起挂掉而且日志里根本看不出是哪个模块把额度吃光了。另外服务端的 key 千万别下发到前端服务端调用是需要签名校验的前端拿着也用不了还会增加泄露风险。2.2 安全域名与 Referer 校验key 后面的那个「安全域名」配置是新手最容易忽略也最容易被反噬的地方。它的原理是浏览器加载地图脚本和发起服务请求时会带上当前页面的Referer服务端校验这个来源在不在白名单里不在就直接拒绝。几个实操细节值得记一下填域名的时候不带协议、不带端口、不带路径一般只写主机名比如localhost、127.0.0.1这类本地开发地址是可以直接加进去的。本地开发时端口经常变8080、8081、5173来回切白名单里不用写端口写主机名就够了。测试环境如果是用 IP 直接访问的把那个 IP 也加进去别等到提测当天才发现地图是白的。生产环境用泛域名的时候想清楚泛域名开太大等于没校验别人扒走你的 key 也能用。还有一个隐藏逻辑很多平台的 Referer 校验对空 Referer 是放行的因为服务端调用天然没有 Referer。你在浏览器地址栏直接敲地址访问是不会有问题的但从一个页面跳转过去就带 Referer 了这时候如果域名没配就会精准地只在跳转场景下报错特别迷惑。注意key 属于敏感配置不要提交到代码仓库也不要在前端代码里硬编码多份。统一走环境变量注入构建时替换。2.3 依赖形态npm 包还是 script 标签这个问题我被问过很多次。目前主流的接入方式还是用 script 标签加载官方的 CDN 脚本社区里虽然有第三方做的封装包但大多滞后于官方版本遇到新接口或者 bug 修复就得等维护者跟进风险不可控。那在 webpack 或 vite 项目里怎么处理我的做法是把 key 写进.env文件用构建工具的环境变量注入到代码里脚本本身不写在index.html里静态引入而是在需要地图的页面里动态注入避免所有页面都白白加载一百多 KB 的 SDK在构建配置里给地图相关的 CDN 域名加一条externals或者分包规则vite 下一般不用特别处理动态注入的 script 不参与打包。至于版本号脚本地址里那个版本参数建议锁死一个明确版本不要用浮动的表达式。官方更新是向前兼容的但总有边界情况锁版本能让你的线上环境在半年后依然保持一致的表现这比追新版本重要得多。下面第三章会给出动态加载的完整封装代码。3. 地图脚本加载方式三种写法与我的取舍3.1 最省事的静态引入最简单的方式是在public/index.html里直接加一行 scriptscript srchttps://map.qq.com/api/gljs?v1.expkey你的KEY/script优点是省事全局直接能拿到window.TMap不用管加载时序。缺点是所有页面都会加载这一百多 KB包括那些跟地图八竿子打不着的登录页、配置页。而且 key 直接暴露在 HTML 里构建产物里也是明文安全性差一些。如果你的项目只有一两个页面用到地图而且整个系统就是个地图为主的工具这种写法完全可以接受。除此之外我都建议往下看。3.2 动态注入加 Promise 封装这是我用得最多的方案。核心思路是写一个加载器第一次调用时注入 script后续调用直接复用同一个 Promise// src/utils/loadTMap.js const KEY process.env.VUE_APP_TMAP_KEY; let task null; export default function loadTMap() { if (window.TMap) return Promise.resolve(window.TMap); if (task) return task; task new Promise((resolve, reject) { const script document.createElement(script); script.type text/javascript; script.async true; script.src https://map.qq.com/api/gljs?v1.expkey${KEY}; script.onload () { if (window.TMap) { resolve(window.TMap); } else { task null; // 允许下次重试 reject(new Error(脚本已加载但 TMap 未挂载通常是 key 无效或域名未加白)); } }; script.onerror () { task null; reject(new Error(地图脚本加载失败检查网络与脚本地址)); }; document.head.appendChild(script); }); return task; }这段代码有两个细节值得说。一是失败后把缓存的 Promise 置空否则一次网络抖动会让这个页面在本次会话里永远拿不到 TMap用户只能刷新页面体验很差。二是区分了onload和onerror两种失败onload触发了但全局对象不存在说明脚本本身返回了内容比如一段错误提示这时候问题基本锁定在 key 和域名上错误信息写得越具体排查越快。在组件里的用法就比较清爽了import loadTMap from /utils/loadTMap; export default { data() { return { mapReady: false }; }, async mounted() { try { const TMap await loadTMap(); this._TMap TMap; this.initMap(); this.mapReady true; } catch (e) { this.$message.error(e.message); } } };配合v-loading或者骨架屏地图区域在加载期间给个占位用户不会看到一块空白。3.3 封装成 Vue 插件全项目复用如果项目里超过三个页面要用地图我会再往上封一层插件把 loader 和常用能力挂到 Vue 原型上// src/plugins/tmap.js import loadTMap from /utils/loadTMap; const TMapPlugin { install(Vue) { let ready false; const waiters []; loadTMap().then((TMap) { Vue.prototype.$TMap TMap; ready true; waiters.splice(0).forEach((fn) fn(TMap)); }); // 组件里用 await this.$tmapReady() 保证拿到实例 Vue.prototype.$tmapReady function () { if (ready) return Promise.resolve(Vue.prototype.$TMap); return new Promise((resolve) waiters.push(resolve)); }; } }; export default TMapPlugin;这样组件里只要await this.$tmapReady()就能拿到 SDK 对象不用担心加载时序。Vue 3 里对应改成插件的app.config.globalProperties加inject思路一样。提醒如果你的项目做了预渲染或者服务端渲染插件安装阶段会直接执行 loader而服务端没有document会报错。这种情况下要把加载逻辑挪到mounted或onMounted里再触发不要写在插件安装的顶层。4. 从零跑通第一个地图组件4.1 容器与初始化参数逐个说清容器就是普通的 div但样式上有一条铁律必须有明确的高度。百分比高度依赖父级链条链条上任何一环没高度地图就是零高表现就是一片空白。我一般直接给死高度或者用flex: 1配合父容器的display: flex。template div classmap-page div idmap-container classmap-container/div /div /template style scoped .map-page { display: flex; flex-direction: column; height: calc(100vh - 84px); /* 减去顶部导航的实际高度 */ } .map-container { flex: 1; min-height: 400px; } /style初始化参数我常用的就这几个initMap() { const TMap this._TMap; this._map new TMap.Map(document.getElementById(map-container), { center: new TMap.LatLng(31.2397, 121.499), // 初始中心点换成你的业务坐标 zoom: 13, minZoom: 5, maxZoom: 18, pitch: 0, rotation: 0, viewMode: 2D, baseMap: { type: vector, // 矢量底图可换 satellite 卫星图 features: [base, building, point] }, doubleClickZoom: false, // 双击缩放会干扰双击选点业务里通常关掉 showControl: false // 默认控件我一般关掉自己加需要的 }); // 只加一个比例尺就够了缩放控件在业务界面上另外做 const scale new TMap.control.ScaleControl({ position: TMap.constants.CONTROL_POSITION.BOTTOM_LEFT }); this._map.addControl(scale); }几个参数的解释。viewMode设成2D是因为 3D 模式在某些低端显卡上渲染压力明显更大除非业务真的需要俯仰视角否则没必要开。features里的building是三维建筑块如果页面只是打点展示去掉它能少渲染一堆东西流畅度有肉眼可见的提升。doubleClickZoom关掉是因为地图上的双击往往被业务占用了比如双击选中某个区域。4.2 生命周期里该做什么、不该做什么组件生命周期的编排我总结成一句话在 mounted 里创建在 beforeDestroy 里销毁中间所有异步操作都要判空。mounted之后容器已经进入文档流可以拿到真实的宽高初始化参数里如果有基于容器尺寸计算的逻辑比如根据屏幕宽度决定缩放级别就放在这里。如果容器在此时仍然是隐藏状态比如地图在一个默认不展开的折叠面板里那就不能初始化得等到面板展开后再初始化这个后面故障章节会细讲。beforeDestroy里必须做的三件事清掉所有定时器尤其是轨迹回放的setInterval、解绑所有地图事件监听、调用地图实例的销毁方法。beforeDestroy() { // 清定时器 if (this._timer) { clearInterval(this._timer); this._timer null; } // 解绑事件用命名函数别用匿名函数否则解绑不掉 if (this._map) { this._map.off(click, this.handleMapClick); this._map.destroy(); this._map null; } this._markerLayer null; this._infoWindow null; }特别注意事件监听一定要用命名函数。写成map.on(click, () {...})这种匿名形式off的时候你连引用都拿不到只能靠销毁整个实例来兜底多个组件共用地图时就会出问题。5. 业务功能落地标记、聚合、信息窗口与 Element UI 联动5.1 点标记与自定义样式GL 版的标记是「图层化」的一个MultiMarker管理一批点比旧版一个个new Marker的方式性能好一大截。样式通过MarkerStyle定义可以在样式层面切换状态initMarkers() { const TMap this._TMap; this._markerLayer new TMap.MultiMarker({ id: shop-layer, map: this._map, styles: { normal: new TMap.MarkerStyle({ width: 26, height: 34, anchor: { x: 13, y: 34 }, // 锚点设成底部中心图标尖端才对得准坐标 src: require(/assets/marker-normal.png) }), active: new TMap.MarkerStyle({ width: 34, height: 44, anchor: { x: 17, y: 44 }, src: require(/assets/marker-active.png) }) }, geometries: this.shops.map((item) ({ id: String(item.id), styleId: normal, position: new TMap.LatLng(item.lat, item.lng), properties: { raw: item } })) }); this._markerLayer.on(click, this.handleMarkerClick); }anchor这个参数是新手最容易忽略的。默认锚点在图标左上角如果你不做设置标记会整体向右下偏移坐标点对着的是图标的左上角看起来「总是偏」。把锚点设成图标底部中心尖端才会精确落在经纬度位置上。点击切换选中态的写法利用styleId就够了handleMarkerClick(evt) { const id evt.geometry.id; const shop this.shops.find((s) String(s.id) id); if (!shop) return; // 先把上一个选中态恢复 const updates []; if (this.activeId this.activeId ! id) { updates.push({ id: this.activeId, styleId: normal, position: this.findPosition(this.activeId) }); } updates.push({ id, styleId: active, position: evt.geometry.position }); this._markerLayer.updateGeometries(updates); this.activeId id; this.activeShop shop; // 驱动侧边卡片显示 this.openInfoWindow(shop); }updateGeometries按id匹配存在就更新、不存在就新增比清空重画高效得多。这里有个坑更新时如果不带position某些版本会把点位置重置掉所以我习惯每次更新都把position一并带上稳妥。5.2 信息窗口里塞一个 Element UI 组件信息窗口的内容默认是纯 DOM想在里面用 elementUI 的按钮和标签得先把内容渲染成 HTML 字符串再塞进去。这时候enableCustom参数就很关键打开它之后窗口容器不会强制套默认皮肤你的自定义样式才有发挥空间。openInfoWindow(shop) { const TMap this._TMap; if (!this._infoWindow) { this._infoWindow new TMap.InfoWindow({ map: this._map, position: new TMap.LatLng(shop.lat, shop.lng), offset: { x: 0, y: -44 }, enableCustom: true }); } const html div classshop-popup div classpopup-title${this.escapeHtml(shop.name)}/div div classpopup-row状态span classtag-${shop.status}${shop.statusText}/span/div div classpopup-row今日单量${shop.orderCount}/div /div ; this._infoWindow.setContent(html); this._infoWindow.setPosition(new TMap.LatLng(shop.lat, shop.lng)); this._infoWindow.open(); }字符串拼接最大的问题是 XSS 和转义门店名称里带个引号或者尖括号页面就乱了所以我写了个escapeHtml工具函数统一处理。那如果信息窗口里的内容复杂到必须用 elementUI 组件怎么办比如要放一个带分页的小表格。我的做法是不在信息窗口里塞组件改用右侧的抽屉或者卡片。元素渲染到地图浮层里脱离了 vue 的组件树this.$refs拿不到事件绑定要靠原生addEventListener数据更新还得手动重绘维护成本很高。交互稍微复杂一点的需求一律甩到侧边栏用el-drawer承载地图上只保留一个标记和一条线职责清晰开发也快。5.3 海量点位交给聚合图层点位超过几百个以后直接把所有标记都渲染出来会明显掉帧缩放的时候整个地图一顿一顿的。这时候用聚合initCluster() { const TMap this._TMap; const geometries this.devices.map((d) ({ id: String(d.id), styleId: normal, position: new TMap.LatLng(d.lat, d.lng), properties: { raw: d } })); this._cluster new TMap.MarkerCluster({ map: this._map, minimumClusterSize: 2, // 两个点以上就合并视密度调整 geometries }); this._cluster.on(click, (evt) { // 聚合点的点击和单点的点击是同一个事件靠 geometry 里有没有聚合信息区分 if (evt.geometry evt.geometry.geometries) { this._map.setCenter(evt.geometry.position); this._map.setZoom(this._map.getZoom() 2); } else { this.handleMarkerClick(evt); } }); }minimumClusterSize这个值要根据实际密度调。门店分布本来就稀疏的场景设成 2 会频繁出现两三个点抱团视觉上反而乱我一般设成 4 或 5。另外聚合的数量气泡如果想改成自己的配色可以通过样式配置去覆盖具体字段名各版本略有差异以你锁定的那个版本的官方文档为准别照着老文章抄。数据量再大上万点的时候聚合也不够了要考虑后端做网格聚合前端只取当前视野范围内的聚合结果。这种方案在设备监控类项目里很常见思路是监听地图的移动和缩放事件把视野边界传给后端后端按网格返回带计数的聚合点。5.4 地址搜索与表单回填地址搜索要用服务类接口注意前面说的 key 必须勾选 WebServiceAPI。推荐用联想搜索响应快、结果轻async searchAddress(keyword) { const TMap this._TMap; if (!this._suggestion) { this._suggestion new TMap.service.Suggestion({ pageSize: 10 }); } const res await this._suggestion.getSuggestions({ keyword, region: this.currentCity, region_fix: 1 }); return res.data || []; }输入框直接用 elementUI 的el-autocomplete把fetch-suggestions指向上面这个方法天然带防抖省得自己写。回填表单的时候除了拿到经纬度一般还要把省市区结构化字段一起填上这时候再用逆地址解析async reverseAddress(lat, lng) { const TMap this._TMap; if (!this._geocoder) { this._geocoder new TMap.service.Geocoder(); } const res await this._geocoder.getAddress({ location: new TMap.LatLng(lat, lng) }); const result res.result || {}; const comp result.address_component || {}; return { address: result.address, province: comp.province, city: comp.city, district: comp.district }; }注意逆地址解析是有配额的列表页千万不要列表渲染时逐条调用。批量场景要么后端统一处理、要么加缓存同一个经纬度重复解析没有任何意义。6. 常见故障速查白屏、Key 报错、尺寸错乱6.1 地图白屏的六种可能白屏是最高频的问题我把排查顺序整理成了一张表按这个顺序查基本十分钟内能定位现象大概率原因排查方式容器区域纯白控制台无报错容器高度为 0用开发者工具看容器盒子高度控制台提示 key 相关错误key 无效/过期/域名未加白看网络面板里脚本请求的返回内容脚本请求 404 或跨域脚本地址写错、版本参数非法直接浏览器打开脚本 URL地图区域灰底带水印key 是演示 key 或配额耗尽控制台查调用量与配额地图出现但偏移严重坐标系不一致检查数据来源是否为 BD-09偶发白屏刷新就好加载时序问题检查是否在 mounted 前访问了实例第一种占了一半以上。很多同学在 vue 里给地图容器写了height: 100%但父级 div 是自适应高度一路往上都没人给高度最后算出来就是 0。解决方式要么给链条上一环设死高度要么给容器min-height。还有一种特别隐蔽的情况地图在v-show隐藏的元素里初始化。v-show是display: none元素不参与布局宽高都是 0这时候初始化地图地图会以 0×0 的容器去计算渲染参数之后即使显示了也是错乱的。正确做法是用v-if控制挂载时机或者等显示之后再初始化。6.2 弹窗和 Tab 里的地图尺寸不对elementUI 的el-dialog默认是懒渲染的关闭后销毁内容el-tabs则是切换时隐藏非激活面板。这两种情况下地图容器在初始化时的尺寸和最终展示尺寸往往对不上表现就是地图只渲染左上角一小块或者灰边一大片。我通用的处理套路是容器可见之后等一帧再通知地图重新计算尺寸。onDialogOpened() { this.$nextTick(() { requestAnimationFrame(() { if (!this._map) { this.initMap(); // 首次打开才初始化 } else { // 已有实例把中心点重设一遍让渲染器重算视口 this._map.setCenter(this._map.getCenter()); } }); }); }用setCenter重设中心点是个小技巧它等价于「重新走一遍渲染流程」比找 resize 方法更通用各版本都吃这一套。放在el-dialog的opened事件里最稳因为那时候动画也结束了容器尺寸是最终值。Tab 场景同理监听el-tabs的tab-click或者用v-if控制每个面板的挂载让地图在面板激活时才创建。多地图实例同时存在虽然能跑但内存和渲染压力会翻倍能避免就避免。6.3 组件销毁与内存泄漏判断有没有泄漏最简单的办法是在页面上反复进出地图页面二十次看浏览器内存曲线是不是一路向上。如果一直涨不回落那就是没销毁干净。常见的几个泄漏点地图实例没调用destroy()定时器没清事件用匿名函数绑定解绑不掉在标记的properties里存了整个业务对象数组的引用导致地图对象和业务数据互相持有。第四条很多人想不到。地图的geometry.properties里塞大数据是会出问题的它会被 SDK 内部保留组件销毁后如果 SDK 对象被别的地方引用整棵数据树都释放不掉。我的习惯是properties里只放一个id需要完整数据时用id回到业务数组里查这样内存关系是单向的清理起来没有死角。6.4 el-table 固定列变透明与地图列表联动的坑最后说一个和地图页经常一起出现的问题elementUI 的表格固定列有时候会变透明滚动的时候能看到下层的文字透上来。这个问题的根源通常在样式覆盖上el-table 的固定列是独立的一层绝对定位元素背景色继承自表格的主题变量一旦你的全局样式或者主题配置把背景色变量改成了透明或者用了backdrop-filter、transform之类的属性触发了新的层叠上下文就会出现这个现象。修复方式很直接在全局样式里把固定列的背景补回去.el-table__fixed, .el-table__fixed-right { background-color: #fff; z-index: 3; } .el-table__fixed::before, .el-table__fixed-right::before { background-color: transparent; }地图页里为什么容易碰到因为地图页的布局经常用transform做侧边栏的动画而transform会让后代元素进入新的层叠上下文固定列的定位和层级计算就会跟着变。我的建议是地图页的侧边栏动画用left或者width别用transform虽然性能差一点点但省掉一大堆层级问题性价比很高。另外地图和表格联动时还有一个常见的性能陷阱表格行悬停高亮对应的地图标记。这个逻辑如果不加节流鼠标快速划过几十行的时候地图会连续触发几十次updateGeometries卡到怀疑人生。我一般用一个 100 毫秒的防抖兜底交互反馈几乎无感性能能提升一个量级。7. 再往前走一步轨迹回放与主题统一7.1 车辆轨迹回放怎么做轨迹回放的核心是三块线、点、定时器。先用折线把所有轨迹点连起来再让一个小车图标沿着线移动。initTrack(points) { const TMap this._TMap; const path points.map((p) new TMap.LatLng(p.lat, p.lng)); // 轨迹线 this._line new TMap.MultiPolyline({ map: this._map, styles: { track: new TMap.PolylineStyle({ color: #3b82f6, width: 6, borderWidth: 2, borderColor: #ffffff, lineCap: round }) }, geometries: [{ id: track, styleId: track, paths: path }] }); // 车辆图标 this._car new TMap.MultiMarker({ map: this._map, styles: { car: new TMap.MarkerStyle({ width: 32, height: 32, anchor: { x: 16, y: 16 }, src: require(/assets/car.png) }) }, geometries: [{ id: car, styleId: car, position: path[0] }] }); this._index 0; this._timer setInterval(() { if (this._index path.length) { clearInterval(this._timer); this._timer null; return; } this._car.updateGeometries([{ id: car, styleId: car, position: path[this._index] }]); this._index 1; }, 200); }几点经验。速度别设太快200 毫秒一个点在大多数场景下体验刚好太快了像瞬移。轨迹点如果很密先做抽稀不然几万个点连成线渲染和回放都会卡。还有个小细节小车图标要根据行驶方向旋转可以在更新位置时用相邻两点的坐标算一下方位角把rotation属性带上效果会自然很多。很多车载监控类的需求旁边还会挂一路实时视频HLS 的 m3u8 流在 vue 里用播放器库挂到 video 标签上就行重点是把视频的时间戳和轨迹点的时刻对齐这样拖进度条的时候地图上的车也能跟着跳到对应位置两边同步做好了整个回放功能的专业感立刻就上来了。7.2 自定义覆盖物与主题统一默认的标记和信息窗口风格跟后台系统的视觉规范往往不搭。有两条路可以统一一条是底图定制在控制台里配置底图样式、生成样式标识、初始化时带上能把路网颜色、水域颜色都调成跟系统主题一致的色系另一条是覆盖物全部自定义。自定义覆盖物用DOMOverlay你可以把任意 DOM 结构贴到地图上好处是能直接用 HTML 和 CSS 写坏处是数量多了会拖慢渲染超过一百个就不建议用了。我的一般原则是数量少、样式要求高的用 DOM 覆盖物数量多的用图片标记。信息窗口的样式统一还有一个取巧的办法把系统的主题色定义成 CSS 变量信息窗口的 HTML 字符串里直接引用这些变量底图换个皮肤窗口颜色自动跟着变不用改两处代码。提示自定义覆盖物的样式一定要加作用域前缀地图浮层是挂在文档流末尾的很容易被全局样式误伤。用类名前缀或者 CSS Modules 都行别直接写.title {}这种裸选择器。最后分享一个我踩过的坑。地图组件的初始化我一开始是写在mounted里的后来为了首屏速度做了路由懒加载和组件异步化结果某些低端手机上组件mounted的时候容器还没完成布局地图初始化的尺寸是错的。后来我改成在mounted里用requestAnimationFrame包一层再初始化这个问题就再没出现过。多花的那一帧换来的是稳定性我觉得划算。
