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

$.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);
					        }
		

猜你喜欢

转载自blog.csdn.net/qq_21179679/article/details/85757723