百度地图接口编程记录

<<style>

.tabLabel {
    height: 24px;
    width:50%;
    text-align: center;
    font-weight: bold;
    padding-right: 2px;
}
 
.tabText {
    padding-left: 0px;
    text-align: center;
}
 
.alarmPic {
    width: 80px;
    height: 80px;
}
 
.childTab {
    width: 100%;
    height: 100%;
}
 
.childTab th {
    text-align: center;
    height: 30px;
}
 
.alarmDiv {
    width: 200px;
    height: 150px;
}
.BMap_bubble_title{
    text-align: center;
    font-weight: bold;
    color:red;
    font-size: 15pt;
}

</style>
<div class="col-sm-12" >
 <div id="allmap" style="overflow:hidden;zoom:1;width: 100%;height: 100%;height:800px;">
        <div id="map" style="height:100%;width:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">1</div>
 </div>
</div>

 
 <script type="text/javascript">
$(function () {
    var url = '${contextPath}script/cms/landview.js?time=' + sys_get_time();
    $.ajax({url:url, dataType:'script', cache:true,
        success: function(){
            var borderjson=${remodel}//将边界信息传到地图界面进行勾画地图边界
            borderinf=borderjson;
            
            
        }
    });
});
var borderinf;
/*********************百度地图API功能*********************/
var map = new BMap.Map('map',{enableMapClick:false}); //创建地图实列,并去除点击详情
var poi = new BMap.Point(106.226666,27.464937); //建立地图中心  金沙106.226666,27.464937 毕节105.298303,27.289636
map.centerAndZoom(poi,11); //默认显示16级
map.setMinZoom(11);
map.enableScrollWheelZoom(); //鼠标滚动
//添加界面控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放  
map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(0, 0)})); //平移缩放控件  PC端默认位于地图左上方
map.addControl(new BMap.ScaleControl()); //比例尺  默认位于地图左下方  
map.addControl(new BMap.OverviewMapControl()); //缩略地图  默认位于地图右下方

/*********************行政区划轮廓与所有坝区边界信息描绘开始*********************/

function showAlarmMessage(data,map){
     
    var content='<div class="alarmDiv">';
    content+='<table style="width:100%;height:100%;" border="1" cellpadding="0" cellspacing="0">';
    content+='<tr><td class="tabLabel">土地编号</td><td class="tabText">001js</td></tr>';
    content+='<tr><td class="tabLabel">面积</td><td class="tabText">125亩</td></tr>';
    content+='<tr><td class="tabLabel">宜种蔬菜</td><td class="tabText">萝卜</td></tr>';
    content+='<tr> <td class="tabLabel">负责人</td><td class="tabText">张三</td> </tr>';
    content+=' <tr> <td class="tabLabel"></td></tr></table></div>';
    var opts = {
        width : 200,     // 信息窗口宽度
        height: 150,     // 信息窗口高度
        title : data.title  // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow(content, opts);// 创建信息窗口对象
    map.openInfoWindow(infoWindow,data.point);// 打开信息窗口
}

/**
 *  点击事件打开弹窗
 */
function open_colorBox(code){

}
 

function getBoundary() {
    var bdary = new BMap.Boundary();
    bdary.get("毕节市金沙县", function(rs) { //获取行政区域
        map.clearOverlays(); //清除地图覆盖物       
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
            alert('未能获取当前输入行政区域');
            return;
        }
        var pointArr = [];//行政区划边界信息
        var arr=[];
        
       
       if(typeof(borderinf)!="undefined"){
           var i=0;
          for(var j=0;j<borderinf.length;j++){
              var data = {};
              var borderArray=new Array();//即将描绘边界点的信息
              //console.log('local:'+JSON.stringify(borderinf[0]));
            
              for(i=0;i<borderinf[j].length;i++){//根据后台边界信息创建边界点
                arr=borderinf[j];
                  var pointThis=new BMap.Point(arr[i].lng,arr[i].lat);
                  borderArray.push(pointThis);
              }
              var polygon = new BMap.Polygon(borderArray, {strokeWeight:1,strokeColor:"#B3D8FF",strokeOpacity:1,fillColor:"#D1EEEE"});  //创建多边形
              
              var clickFunction = function (i) {//鼠标点击事件
                    return function (event) {
                 /*        console.log(i);
                        data.title="坝区详情";
                        data.point=event.point;
                        sys_ajax({type:"POST",url:"landview-querylandinfoindex",data:{"landcode":i},dataType:"json",
                            success:function(result){
                            console.log(result);
                            }
                        });
                        
                        showAlarmMessage(data,map); */
                            var url = create_url('landview-datil');
                            var data = {'code':i};
                            $.colorbox({overlayClose:true, href:url, data:data, close:'[关闭]', width:'60%',height:'800px',  open:true,
                                onOpen:function () {
                                    $('body').addClass('modal-open');
                                },
                                onComplete:function () {
                                    $('#cboxLoadedContent').css('overflow-x', 'hidden');
                                },
                                onClosed:function () { $('body').removeClass('modal-open'); }
                            });
                        
                        
                    };
                }(arr[i-1].bordercode);
                
                var dblclickFunction = function (i) {//鼠标双击事件  用到闭包函数解决id数据总是最后一个的问题
                    return function (event) {
                        console.log(i);
                        //将点增加到视野范围内
                        var path = polygon.getPath();//双击放大视野
                        borderArray = borderArray.concat(path);
                    };
                }(arr[i-1].bordercode);
                
                var mouseoverFunction = function (i,p) {//鼠标进入事件
                    return function (event) {
                        p.setStrokeWeight(3);
                        p.setFillColor("#B3D8FF");
                    };
                }(arr[i-1].bordercode,polygon);
                
                var mouseoutFunction = function (i,p) {//鼠标离开事件
                    return function (event) {
                        p.setStrokeWeight(1);
                        p.setFillColor("#D1EEEE");
                    };
                }(arr[i-1].bordercode,polygon);
                
              polygon.addEventListener('click',clickFunction);//鼠标点击事件
              polygon.addEventListener('dblclick',dblclickFunction);//鼠标双击事件
              polygon.addEventListener('mouseover',mouseoverFunction);//鼠标进入事件
              polygon.addEventListener('mouseout',mouseoutFunction);//鼠标离开事件
              map.addOverlay(polygon);//添加地图图形
              borderArray.splice(0,borderArray.length);//清除描点数组
              arr.splice(0,arr.length);//清除描点数组
          }
       }
       else{
           console.log('landview-list:ndefined 边界信息错误！');
       }
            
        for (var i = 0; i < count; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
            ply.setFillColor("none");
            map.addOverlay(ply); //添加行政区划圈
          
            pointArr = pointArr.concat(ply.getPath());//获取行政区划边界信息
        }
        map.setViewport(pointArr); //调整视野  
    });
}

setTimeout(function() {
    getBoundary();
}, 2000);
/*********************行政区划轮廓与所有坝区边界信息描绘开始********************/

</script>
    

效果如下：