传统的地图撒点方式在数据量大的情况下势必会造成页面卡顿效果,因为通过循环点位方式去撒点他是不断在页面上添加dome元素。
就比如下面这个效果(这个通过vue-baidu-map组件来实现的,传统for添加marker效果是一样的):
<bml-marker-clusterer :averageCenter="true" :styles="clustererStyles">
<bm-marker v-for="(item,index) in MarkerList" :key="index" :position="{lng: item.lng, lat: item.lat}"
@click="infoWindowOpen(item)" :icon="iconFormatter(item)">
</bm-marker>
</bml-marker-clusterer>
现在我们来去解决这个问题
// 我们需要这两个api来解决这个问题
<script src="https://api.map.baidu.com/api?v=3.0&&type=web&ak=你自己申请的al" type="text/javascript" charset="utf-8"></script>
// mapv
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
核心代码
initMap() {
const vm = this
vm.BDmap = new BMap.Map('container'); // 创建Map实例
vm.BDmap.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
vm.BDmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
// 添加切换图层控件
var mapType = new BMap.MapTypeControl({
"mapTypes": [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
"anchor": BMAP_ANCHOR_BOTTOM_RIGHT
});
vm.BDmap.addControl(mapType); //2D图,卫星图
// 设置中心点
if (vm.MapCenter.lng) {
var point = new BMap.Point(vm.MapCenter.lng, vm.MapCenter.lat);
vm.BDmap.setCenter(point);
}
// 创建定位控件
var locationControl = new BMap.GeolocationControl();
vm.BDmap.addControl(locationControl);
// 创建图标
vm.myIcon = new BMap.Icon(
sbld, // 图片地址
new BMap.Size(55, 60), //视窗大小
{
"imageSize": new BMap.Size(55, 60), //显示图标大小(根据实际大小等比例缩放)
"imageOffset": new BMap.Size(0, 0) // 图片相对视窗的偏移
}
);
// 存放点位信息
var data = [];
// 图标对象
var image = new Image();
image.src = sbld;
image.onload = function() {
vm.MarkerList.map(item => {
data.push({
geometry: {
type: 'Point',
coordinates: [item.lng, item.lat],
dataInfo: item
},
icon: image
});
})
var dataSet = new mapv.DataSet(data);
var options = {
draw: 'icon',
methods: {
click: function(item) {
item ? vm.infoWindowOpen(item.geometry.dataInfo) : ""
}
},
size: 50,
width: 55,
height: 60,
// sx: 10,
// sy: 10,
// swidth: 50,
// sheight: 50,
}
var mapvLayer = new mapv.baiduMapLayer(vm.BDmap, dataSet, options);
}
}
这样我们最终实现出来效果