百度地图大量点卡顿问题解决办法。

68 阅读 0 评论 45 点赞

我是靠谱客的博主无辜手机，最近开发中收集的这篇文章主要介绍百度地图大量点卡顿问题解决办法。，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

$.each(obj,function(index,content){
//								jingches[index]=markerincoWindow(content.longitude,content.latitude,'resources/images/trafficMonitoring/policeCar.png',48,48,"设备编号:"+content.gpssn+"</br>设备类型:"+content.dwsblx+"</br>车号:"+content.carlicense+"</br>管理单位:"+content.departmentname+"</br>更新时间:"+content.rkrj+"","警车");
//						});
//						jingchemarkers = new BMapLib.MarkerClusterer(BmapUtils.getMap(), {markers:jingches});
//						jingchemarkers.setGridSize(100);

开始使用的是聚合点，但是上到真实环境之后发现在大量点的情况下会出现卡顿的情况，通过查找资料最后使用百度的开源库 mapv 来解决问题，下面是解决在mapv中给点增加信息的代码。

				var obj = data;
//						$.each(obj,function(index,content){
//								jingches[index]=markerincoWindow(content.longitude,content.latitude,'resources/images/trafficMonitoring/policeCar.png',48,48,"设备编号:"+content.gpssn+"</br>设备类型:"+content.dwsblx+"</br>车号:"+content.carlicense+"</br>管理单位:"+content.departmentname+"</br>更新时间:"+content.rkrj+"","警车");
//						});
//						jingchemarkers = new BMapLib.MarkerClusterer(BmapUtils.getMap(), {markers:jingches});
//						jingchemarkers.setGridSize(100);  
						
						 var data = [];
					        var img = new Image();
					        img.src = 'resources/images/trafficMonitoring/policeCar.png';
					        img.onload = function() {
					        	$.each(obj,function(index,content){
					                data.push({
					                    geometry: {
					                        type: 'Point',
					                        coordinates: [content.longitude,content.latitude],
					                        content:"设备编号:"+content.gpssn+"</br>设备类型:"+content.dwsblx+"</br>警员姓名:"+content.policename+"</br>警号:"+content.policesn+"</br>管理单位:"+content.departmentname+"</br>更新时间:"+content.rkrj+"";
					                    },
					                    icon: img
					                });
					            })
					            var dataSet = new mapv.DataSet(data);
					            var options = {
					                draw: 'icon',
					                methods: { // 一些事件回调函数
					                    click: function (item) { // 点击事件，返回对应点击元素的对象值
					                        console.log(item);
					                    },
					                    mousemove: function(item) { // 鼠标移动事件，对应鼠标经过的元素对象值
//					                        var opts = {
					                    	if(item!=null){
					                    		var pt = new BMap.Point(item.coordinates[0],item.coordinates[1])
						            			var infoWindow = new BMap.Label(pathname,opts);  // 创建信息窗口对象 
					                    		BmapUtils.getMap().addOverlay(infoWindow,pt); //开启信息窗口
					                    	}
						        			
					                    }
					                }
					            }
					            jingcheLayer = new mapv.baiduMapLayer(BmapUtils.getMap(), dataSet, options);
					        }