当在前端使用VUE展示百度地图并标点,并通过范围进行筛选时, 步骤编写代码:
下面是一个简单的示例代码,演示了如何在VUE中展示百度地图并实现标点和范围筛选功能:
<template>
<div>
<div ref="map" style="width: 100%; height: 400px;"></div>
<button @click="filterMarkers">筛选标点</button>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
markers: [
{ lng: 116.4035, lat: 39.915 },
{ lng: 116.4077, lat: 39.914 },
// 添加更多标点坐标
]
};
},
mounted() {
this.initMap();
this.addMarkers();
},
methods: {
initMap() {
this.map = new BMap.Map(this.$refs.map);
this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
},
addMarkers() {
this.markers.forEach(marker => {
const point = new BMap.Point(marker.lng, marker.lat);
const marker = new BMap.Marker(point);
this.map.addOverlay(marker);
});
},
filterMarkers() {
const bounds = this.map.getBounds();
this.markers.forEach(marker => {
const point = new BMap.Point(marker.lng, marker.lat);
if (bounds.containsPoint(point)) {
// 在范围内的标点处理逻辑
console.log('此标点在范围内:', marker);
}
});
}
}
};
</script>
<style>
/* 可根据需要添加样式 */
</style>
在这个示例中,一个Vue组件,在mounted
生命周期钩子函数中初始化地图,并添加了一些标点。然后,实现了一个filterMarkers
方法,在这个方法中可以获取地图当前视野的范围,并根据范围筛选出符合条件的标点。