百度地图海量点位渲染造成卡顿问题解决

传统的地图撒点方式在数据量大的情况下势必会造成页面卡顿效果，因为通过循环点位方式去撒点他是不断在页面上添加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);
    }
}

这样我们最终实现出来效果