百度地图API 海量点 自定义添加信息
<!--添加百度地图--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script> <script src="../../public/js/GetURLParam.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> //html代码 <body onload="init()"> <form id="form1" runat="server"> <div style="width:100%" id="container"></div> </div> </form> </body> //关键代码 <script> //默认最大 $(document).ready(function(){ var height=GetURLParam("height"); if(height!=null&&height!="undefined"&&height!=""){ $("#container").css("height",height+"px"); } else{ $("#container").css("height",$(document.body).height()); } }); var init = function() { var bumenid =document.getElementById("hiddText").value; //部门id var typeid =document.getElementById("selType").value; //类型id if("<%=scvalue %>"==1){ //首次加载 bumenid=-1; } var map = new BMap.Map("container", {}); // 创建Map实例 map.centerAndZoom(new BMap.Point(113.376170,22.521573), 5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); //启用滚轮放大缩小 if (document.createElement(‘canvas‘).getContext) { // 判断当前浏览器是否支持绘制海量点 $.ajax({ url:‘/CompanyUser/Action.ashx?Action=OA_Map_InfoHaiXiang&ID=‘+bumenid+"&typeid="+typeid,//带参一般处理程序 type:‘POST‘, dataType:‘html‘, contentType:"application/json; charset=utf-8", error:function(XMLHttpRequest, textStatus, errorThrown){parent.error("系统建议管理(提交单)数据加载错误");}, success:function(result){ if(result!=""){ var data=eval("("+result+")"); //result 类似这种 [[经度,维度,1]] 这个1 我始终不明白是什么 var points = []; // 添加海量点数据 for (var i = 0; i < data.length; i++) { points.push(new BMap.Point(data[i][0],data[i][1])); } var options = { size: BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_STAR, color: ‘#d340c3‘ } var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection pointCollection.addEventListener(‘click‘, function (e) { var Name="";//名称 var ads="";//地址 var tel="";//电话 //关于自定义信息 修改json [[经度,维度,1,名称,地址,电话]] //循环查出值 for (var i = 0; i < data.length; i++) { points.push(new BMap.Point(data[i][0],data[i][1])); if(data[i][0]==e.point.lng&&data[i][1]==e.point.lat){//经度==点击的,维度 Name=data[i][3]; ads=data[i][4]; tel=data[i][5]; break; } } var point = new BMap.Point(e.point.lng, e.point.lat); var opts = { width: 250, // 信息窗口宽度 height: 70, // 信息窗口高度 title:"", // 信息窗口标题 enableMessage: false,//设置允许信息窗发送短息 } var infowindow = new BMap.InfoWindow("名称:"+Name+"<br/>地址:"+ads+"<br/>电话:"+tel, opts); map.openInfoWindow(infowindow, point); }); map.addOverlay(pointCollection); // 添加Overlay } } }); } else { alert(‘请在chrome、safari、IE8+以上浏览器查看本示例‘); } } </script>