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

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

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

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

百度地图MarkerClusterer点过多时卡顿问题
问题原因:由于百度地图不断渲染DOM的原因导致点过多时,会出现地图卡顿问题卡顿代码: /*** 向该聚合添加一个标记.* @param {Marker} marker 要添加的标记.* @retur ...
android百度地图overlay卡顿,百度地图maker过多，导致卡顿的优化
原文:https://blog.csdn.net/yzyssg1/article/details/73130679 百度地图的API虽然说覆盖物多了可以用聚合,但聚合使用下来,性能并不好目前解决方案 ...
关于最新Solidworks2018大型装配设计、仿真渲染并行计算卡顿慢的分析与解决方案
关于最新Solidworks2018大型装配设计.仿真渲染并行计算卡顿慢的分析与解决方案 (一)三维设计与仿真并行计算的卡顿慢问题分析 Solidworks是CAD专业领域 ...
和平精英连接服务器未响应,和平精英卡顿怎么解决-和平精英卡顿问题解决方法_快吧手游...
和平精英卡顿怎么解决?和平精英卡顿问题解决方法.和平精英是一款全新的刺激枪战游戏,有着高清高品质的游戏画面地图,还有百人同场竞技方法,但是难免会遇到卡顿问题,这时候该怎么办呢?下面就随着小编一起来看看 ...
bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
Mac-Windows下IDEA卡顿问题解决
Mac-Windows下IDEA卡顿问题解决修改前: -Xms128m -Xmx750m -XX:ReservedCodeCacheSize=512m -XX:+UseG1GC -XX:SoftRe ...
[转]Win10 莫名卡顿问题解决（1903-1909版本）
Win10 莫名卡顿问题解决(1903-1909版本) 最近使用win10的时候经常莫名的卡顿,CPU使用率100%,内存使用100%,磁盘使用100%. 打开资源管理器会发现:system或者系统 ...
影之刃服务器维护,《影之刃3》服务器卡顿问题解决方法
影之刃3服务器卡顿怎么办?影之刃3在正式开放公测后迎来了2月份第一次更新,困扰玩家们的卡顿问题也是解决了,今天小编给大家带来了<影之刃3>服务器卡顿问题解决方法,接下来跟小编一起来看看吧. ...
vue--百度地图之离线地图--大量标注点造成卡顿问题--海量点聚合性能优化
如果你啥都不想看,只想解决问题,直接跳转–四.步骤目录一.需求二.地图的引入.聚合点的使用 1.如图:引入百度地图和其他相关插件(按需引入,这些百度地图官网上都可以下载到) 2.初始化地图准备: ...

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

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

最新文章

热门文章