Vue项目中天地图动态标注的添加与删除实践

张

张建站

2026/4/17 3:11:58

10分钟阅读

1. 天地图与Vue结合的基础准备在Vue项目中使用天地图API前需要先完成基础的环境配置。我推荐使用npm安装天地图JavaScript API的方式这样能更好地与现代前端工程化开发流程结合。首先在项目中执行npm install tdt-map安装完成后在main.js中全局引入天地图资源。这里有个小技巧建议把天地图密钥放在环境变量中管理import T from tdt-map import ../node_modules/tdt-map/dist/tdt.min.css Vue.prototype.$T T Vue.prototype.$tdtKey process.env.VUE_APP_TDT_KEY初始化地图组件时我习惯把地图实例挂载到Vue实例上方便全局调用。在组件mounted钩子中这样写mounted() { this.map new this.$T.Map(mapContainer, { center: new this.$T.LngLat(116.404, 39.915), zoom: 11, minZoom: 5, maxZoom: 18 }) }这里有个容易踩的坑天地图容器需要设置明确的高度。我建议在CSS中使用vh单位确保在不同设备上都能正常显示#mapContainer { width: 100%; height: 80vh; margin: 0; padding: 0; }2. 动态标注的创建与管理2.1 标注的批量创建实际项目中我们通常需要批量添加标注点。我封装了一个可复用的方法支持自定义图标和点击事件addMarkers(points, iconConfig, clickHandler) { const markers [] points.forEach(item { const marker new this.$T.Marker( new this.$T.LngLat(item.lng, item.lat), { icon: new this.$T.Icon({ iconUrl: iconConfig.url, iconSize: new this.$T.Point(iconConfig.width, iconConfig.height) }) } ) marker.customId item.id // 自定义标识 this.map.addOverLay(marker) if (clickHandler) { marker.addEventListener(click, () { clickHandler(item, marker) }) } markers.push(marker) }) return markers }使用时可以这样调用const hospitals this.addMarkers( [ {id: h1, lng: 116.404, lat: 39.915, name: 协和医院}, {id: h2, lng: 116.428, lat: 39.903, name: 301医院} ], { url: require(/assets/hospital.png), width: 32, height: 32 }, (item, marker) { this.showHospitalInfo(item) } )2.2 标注的自定义属性为了后续能精准控制特定标注我们需要给标注添加自定义属性。除了上面代码中的customId还可以扩展更多元数据marker.metaData { type: hospital, district: 海淀区, level: 三甲 }这样在后续操作时我们不仅能通过ID查找标注还能按类型、区域等属性进行筛选。3. 精准删除标注的实现方案3.1 基于标识的删除方法原始文章展示了通过遍历删除的方式这里我优化了一个更高效的版本removeMarkersByIds(ids) { const overlays this.map.getOverlays() overlays.forEach(overlay { if (overlay.customId ids.includes(overlay.customId)) { this.map.removeOverLay(overlay) } }) }这个方法支持批量删除调用时只需传入要删除的标注ID数组// 删除ID为h1和h2的标注 this.removeMarkersByIds([h1, h2])3.2 基于条件的动态筛选更灵活的做法是根据条件动态筛选要删除的标注removeMarkersByCondition(conditionFn) { const overlays this.map.getOverlays() overlays.forEach(overlay { if (conditionFn(overlay)) { this.map.removeOverLay(overlay) } }) }使用示例// 删除所有类型为医院的标注 this.removeMarkersByCondition( overlay overlay.metaData?.type hospital ) // 删除海淀区的三甲医院 this.removeMarkersByCondition( overlay overlay.metaData?.district 海淀区 overlay.metaData?.level 三甲 )4. 高级应用标注的状态管理4.1 使用Vuex管理标注状态在复杂项目中建议使用Vuex集中管理标注状态。首先定义store// store/modules/map.js const state { markers: [], visibleMarkerIds: [] } const mutations { ADD_MARKERS(state, markers) { state.markers [...state.markers, ...markers] }, TOGGLE_MARKERS(state, {ids, visible}) { if (visible) { state.visibleMarkerIds [...new Set([...state.visibleMarkerIds, ...ids])] } else { state.visibleMarkerIds state.visibleMarkerIds.filter(id !ids.includes(id)) } } }然后在组件中使用watch监听状态变化watch: { mapStore/visibleMarkerIds: { handler(newVal, oldVal) { // 找出需要新增的标注 const toAdd this.mapStore.markers.filter( m newVal.includes(m.customId) !oldVal.includes(m.customId) ) // 找出需要删除的标注 const toRemove oldVal.filter(id !newVal.includes(id)) // 执行更新 if (toAdd.length) this.addMarkers(toAdd) if (toRemove.length) this.removeMarkersByIds(toRemove) }, deep: true } }4.2 标注的动画效果为提升用户体验可以为标注添加显隐动画。这里实现一个淡入淡出效果async fadeMarker(marker, show true, duration 500) { const step 20 const delta 1 / (duration / step) if (show) { marker.setOpacity(0) this.map.addOverLay(marker) for (let op 0; op 1; op delta) { await new Promise(resolve setTimeout(resolve, step)) marker.setOpacity(op) } } else { for (let op 1; op 0; op - delta) { await new Promise(resolve setTimeout(resolve, step)) marker.setOpacity(op) } this.map.removeOverLay(marker) } }使用时可以这样调用// 淡入显示 this.fadeMarker(marker, true) // 淡出隐藏 this.fadeMarker(marker, false)5. 性能优化实践5.1 标注的聚类显示当地图缩放级别较小时可以使用标注聚类来提升性能。先安装聚类插件npm install tdt-map-cluster然后在项目中这样使用import MarkerCluster from tdt-map-cluster // 创建聚类实例 const cluster new MarkerCluster(this.map, { gridSize: 80, maxZoom: 15, styles: [{ url: require(/assets/cluster.png), size: new this.$T.Point(40, 40), textColor: #fff }] }) // 添加标注到聚类管理器 cluster.addMarkers(markers) // 需要删除时 cluster.removeMarkers(markersToRemove)5.2 可视区域优化当地图标注很多时可以只渲染可视区域内的标注updateVisibleMarkers() { const bounds this.map.getBounds() this.allMarkers.forEach(marker { const position marker.getLngLat() if (bounds.contains(position)) { if (!this.map.getOverlays().includes(marker)) { this.map.addOverLay(marker) } } else { this.map.removeOverLay(marker) } }) } // 监听地图移动事件 this.map.addEventListener(moveend, this.updateVisibleMarkers)6. 常见问题解决方案在实际开发中我遇到过几个典型问题值得分享。首先是天地图标注点击事件冒泡问题当地图上既有标注点击又有地图点击时会出现事件冲突。解决方案是marker.addEventListener(click, e { e.stopPropagation() // 处理标注点击逻辑 })其次是标注z-index的控制问题。天地图的标注默认是按添加顺序决定叠放层次如果需要手动控制// 将标注置顶 marker.setTop(true) // 设置具体z-index marker.setZIndex(100)还有一个常见问题是内存泄漏。在Vue组件销毁时务必清理所有标注和事件监听beforeDestroy() { // 移除所有标注 this.map.clearOverlays() // 移除事件监听 this.map.removeEventListener(moveend, this.updateVisibleMarkers) // 如果有聚类实例 if (this.cluster) { this.cluster.clearMarkers() } }7. 完整示例代码最后分享一个完整的Vue单文件组件示例实现了标注的增删改查template div div idmapContainer/div div classcontrol-panel button clickaddHospitalMarkers添加医院/button button clickremoveAllMarkers清除所有/button div v-formarker in markers :keymarker.id input typecheckbox v-modelmarker.visible changetoggleMarker(marker) {{ marker.name }} /div /div /div /template script export default { data() { return { map: null, markers: [ {id: h1, lng: 116.404, lat: 39.915, name: 协和医院, visible: true}, {id: h2, lng: 116.428, lat: 39.903, name: 301医院, visible: true} ], markerInstances: {} } }, mounted() { this.initMap() this.addHospitalMarkers() }, methods: { initMap() { this.map new this.$T.Map(mapContainer, { center: new this.$T.LngLat(116.404, 39.915), zoom: 12 }) }, addHospitalMarkers() { this.markers.forEach(item { if (item.visible !this.markerInstances[item.id]) { const marker new this.$T.Marker( new this.$T.LngLat(item.lng, item.lat), { icon: new this.$T.Icon({ iconUrl: require(/assets/hospital.png), iconSize: new this.$T.Point(32, 32) }) } ) marker.customId item.id this.map.addOverLay(marker) this.markerInstances[item.id] marker } }) }, toggleMarker(marker) { if (marker.visible) { this.addMarker(marker) } else { this.removeMarker(marker.id) } }, addMarker(markerData) { if (this.markerInstances[markerData.id]) return const marker new this.$T.Marker( new this.$T.LngLat(markerData.lng, markerData.lat), { icon: new this.$T.Icon({ iconUrl: require(/assets/hospital.png), iconSize: new this.$T.Point(32, 32) }) } ) marker.customId markerData.id this.map.addOverLay(marker) this.markerInstances[markerData.id] marker }, removeMarker(markerId) { if (!this.markerInstances[markerId]) return this.map.removeOverLay(this.markerInstances[markerId]) delete this.markerInstances[markerId] }, removeAllMarkers() { Object.values(this.markerInstances).forEach(marker { this.map.removeOverLay(marker) }) this.markerInstances {} this.markers.forEach(m m.visible false) } }, beforeDestroy() { this.map.clearOverlays() } } /script style #mapContainer { width: 100%; height: 80vh; } .control-panel { position: absolute; top: 20px; right: 20px; background: white; padding: 10px; z-index: 1000; } /style