vue-baidu-map-3x bm-local-search 清空标点
时间: 2025-06-04 18:21:31 浏览: 17
### 在 vue-baidu-map-3x 中使用 bm-local-search 清空地图上的标记点
在 `vue-baidu-map-3x` 中,若需要清空地图上的标记点,可以通过以下方法实现:动态管理地图上所有添加的标记点,并通过清除这些标记点的方式来达到清空效果[^1]。具体实现如下:
```vue
<template>
<div>
<button @click="clearMarkers">清空标记点</button>
<baidu-map class="map" :center="center" :zoom="zoom">
<!-- 地点搜索 -->
<bm-local-search
:keyword="searchKeyword"
:auto-viewport="true"
:panel="false"
@searchcomplete="handleSearchComplete"
/>
<!-- 动态生成的标记点 -->
<bm-marker
v-for="(marker, index) in markers"
:key="index"
:position="{lng: marker.lng, lat: marker.lat}"
/>
</baidu-map>
</div>
</template>
<script>
export default {
data() {
return {
center: { lng: 116.404, lat: 39.915 }, // 地图初始中心点
zoom: 15, // 地图缩放级别
searchKeyword: '', // 搜索关键词
markers: [] // 存储所有标记点的位置
};
},
methods: {
clearMarkers() {
this.markers = []; // 清空所有标记点数据
},
handleSearchComplete(results) {
if (results && results.getNumPois() > 0) {
const pois = results.getPois(); // 获取所有搜索结果
this.markers = pois.map(poi => ({ lng: poi.point.lng, lat: poi.point.lat })); // 更新标记点位置
}
}
}
};
</script>
<style scoped>
.map {
width: 100%;
height: 500px;
}
</style>
```
#### 实现细节
- `markers`: 用于存储所有标记点的位置信息。当需要清空标记点时,只需将该数组清空即可[^1]。
- `clearMarkers`: 点击按钮时调用的方法,直接清空 `markers` 数组,从而移除地图上的所有标记点[^1]。
- `handleSearchComplete`: 搜索完成后的回调函数,将搜索结果中的每个 POI 转换为标记点的位置信息并存储到 `markers` 中[^1]。
---
###
阅读全文
相关推荐
















