zoukankan      html  css  js  c++  java
  • 百度地图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>
  • 相关阅读:
    无限风光 : 近来地形算法学习小结
    上帝的天空之岛
    Layered>Variance>Shadow Map
    好事多磨:Ogre1.7 编译记
    蒙特卡罗(Monte Carlo)方法(转自百度百科)
    linux下压缩打包命令合辑
    Ubuntu Linux 环境搭建|adnroid篇
    个人知识管理(转)
    ubuntu 跳强技巧(转)
    Ubuntu Linux环境搭建|Java篇
  • 原文地址:https://www.cnblogs.com/zeze/p/5091702.html
Copyright © 2011-2022 走看看