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

$.each(obj,function(index,content){
//								jingches[index]=markerincoWindow(content.longitude,content.latitude,'resources/images/trafficMonitoring/policeCar.png',48,48,"设备编号:"+content.gpssn+"
设备类型:"+content.dwsblx+"
车号:"+content.carlicense+"
管理单位:"+content.departmentname+"
更新时间:"+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+"
设备类型:"+content.dwsblx+"
车号:"+content.carlicense+"
管理单位:"+content.departmentname+"
更新时间:"+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+"
设备类型:"+content.dwsblx+"
警员姓名:"+content.policename+"
警号:"+content.policesn+"
管理单位:"+content.departmentname+"
更新时间:"+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); }

你可能感兴趣的:(地图)