**
百度地图Javascript使用海量点加载数据并自定义图标
由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死，点聚合的形式可以解决数据量大浏览器卡死问题，但是移除点时点聚合不太好用，所以使用mapv的散点图形式展示点来解决该问题！！！
首先mapv需要引用js
<script src="/build/mapv.min.js"></script>
var datas = [];//定义数组装地图上标的点以及点的信息function yjsgisutil() {$.ajax({url : '/gisutil/showAll',dataType : 'json',type : 'get',async : false,success : function(data) {datas=[];map.clearOverlays(); // 清除地图覆盖物var img = new Image();img.src = '/statics/map/img/工厂.png';//自定义点的图片img.onload = function() {// 构造数据for (var i = 0; i < data.length; i++) {//循环接口内的数据datas.push({geometry: {type: 'Point',coordinates: [data[i].longitude, data[i].latitude]//经纬度，用于标点},icon: img,tag: {utilName: data[i].utilName,id:data[i].id,principal:data[i].principal,telphone:data[i].telphone,address:data[i].address,notes:data[i].notes //点的信息，用于后面实现点击标的点弹窗在弹窗中显示详细信息} });}var dataSet = new mapv.DataSet(datas);var options = {deg:0,draw: 'icon',methods: {click: (datas) => {//图标点击事件if (datas && datas.tag) {let bPoint = new BMap.Point(datas.geometry.coordinates[0], datas.geometry.coordinates[1]);map.openInfoWindow(new BMap.InfoWindow("<div class='BMap_bubble_content' style='width: auto; height: auto;'><div>"+ "<table width='100%'><tbody><tr><td><a style='font-size: 14px; color: rgb(77, 77, 77); font-weight: bold; text-decoration: none;'>"+ datas.tag.utilName+ "</a><a style='font-size: 12px; color: rgb(61, 109, 204); margin-left: 5px; text-decoration: none;' href='javascript:dates8("+datas.tag.id+");'"+ "'>详情»</a></td>"+ "</tr>"+ "<tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>责任人："+ datas.tag.principal+ "</p></td></tr>"+ "<tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>责任人电话："+ datas.tag.telphone+ "</p></td></tr><tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>详细地址："+ datas.tag.address+ "</p></td></tr><tr><td><p style='padding: 0px; margin: 0px; line-height: 18px; font-size: 12px; color: rgb(127, 127, 127);margin-top: 4px;'>备注："+ datas.tag.notes+ "</p></td></tr></tbody></table>"+ "</div></div>"),bPoint);}}},size: 30,//设置图片大小width: 30,height: 30,//sx: 10,//sy: 10,//swidth: 50,//sheight: 50,}var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);}}});}
效果图如下：
可在此链接进行demo测试
上述方法就算是100万条数据也不会造成浏览器卡死，只是需要等10秒钟左右
