• 百度地图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="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 = {
     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>
  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/zeze/p/5091702.html
Copyright © 2020-2023  润新知