JS百度地图只显示一个省

1.用贵州省为例,代码粘贴在后面,主要做了两个功能,一个是只显示某个省的区域,另一个是进行地址的批量解析。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?
    v=2.0&ak=你的key"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>

<script src="addr/jquery-1.7.2.min.js"></script>
<script src="addr/pace.min.js"></script>
<script src="addr/jquery.qrcode.min.js"></script>
<script src="addr/address.js"></script>
<script type="text/javascript">
    var baseurl = "http://localhost:8080";
    var map = new BMap.Map("allmap");         
    //设置地图的中心点的坐标
    var point = new BMap.Point(106.714476, 26.60403);
    // 初始化地图,设置中心点坐标和地图级别
    map.centerAndZoom(point,8);  
    //添加地图类型控件
      map.addControl(new BMap.MapTypeControl({
          mapTypes:[
              BMAP_NORMAL_MAP,
              BMAP_HYBRID_MAP
          ]}));      
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    //只显示某个省份的关键代码
    var bdary = new BMap.Boundary();
    bdary.get('贵州省', function(rs){//获取行政区域
        map.clearOverlays();//清除地图覆盖物
        //思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
        //1.获取选中行政区划边框点的集合rs.boundaries[0]
        var list =rs.boundaries;
        var num="";
        var max  = list[0];
        for (var i = 1; i < list.length; i++) {
            if (list[i].length > max.length){ 
                max = list[i]; 
            }
        }
            var strs = new Array();
            strs = max.split(";");
            var ENWS = "";
            for (var i=0;i<strs.length;i++) {
                ENWS += strs[i] + ";"
            }

 //2.自定义外围边框点的集合
            var E_JW = "170.672126, 39.623555;";        //东
            var EN_JW = "170.672126, 81.291804;";       //东北角
            var N_JW = "105.913641, 81.291804;";        //北
            var NW_JW = "-169.604276,  81.291804;";     //西北角
            var W_JW = "-169.604276, 38.244136;";       //西
            var WS_JW = "-169.604276, -68.045308;";     //西南角
            var S_JW = "114.15563, -68.045308;";        //南
            var SE_JW = "170.672126, -68.045308 ;";     //东南角
            //3.添加环形遮罩层
            var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
                strokeColor:"none",
                strokeOpacity:0,
                fillColor:"#a9b9fe",
                strokeOpacity: 0.5,
                fillOpacity:"1"
                    }); //建立多边形覆盖物
             map.addOverlay(ply1);//遮罩物是半透明的,如果需要纯色可以多添加几层
            //4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
            var ply = new BMap.Polygon(max, {strokeWeight:3,strokeColor:"#064fa0",fillColor:""});
            map.addOverlay(ply);
            map.setViewport(ply.getPath());//调整视野
    });

var geoc = new BMap.Geocoder();     //地址解析器
        var site ='';
        //获取地址信息
        map.addEventListener("click", function(e){   
            //清除地图上所有的覆盖物
            map.clearOverlays();
            //通过点击百度地图,可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度     
            var pot = e.point;
            geoc.getLocation(pot, function(rs){
                //addressComponents对象可以获取到详细的地址信息
                var addComp = rs.addressComponents;
                // var site = addComp.province + ", " + addComp.city + ", " + addComp.district;
                site = addComp.district;
                $.ajax({
                    url:baseurl+"/xljk/ws/getOrgname",
                    async:false,
                    data:{"cname":site},
                    success:function(result){
                    var datas = result.result;
                    var adds= [];
                    for(var i =0;i<datas.length;i++){
                        adds.push(datas[i].orgname);
                    }
                    for(var index =0;index < adds.length;index++) {
                        var add = adds[index];
                        geocodeSearch(add);
                    }
                    function geocodeSearch(add){
                        geoc.getPoint(add, function(point){
                        if (point) {
                            var address = new BMap.Point(point.lng, point.lat);
                            addMarker(address,new BMap.Label(add,{offset:new BMap.Size(10,-10)}));
                            }
                           }, "贵阳市");
                         }
                    // 编写自定义函数,创建标注
                    function addMarker(point,label){
                            var marker = new BMap.Marker(point);
                            map.addOverlay(marker);
                            marker.setLabel(label);
                         }
                 }});
            });   
            
                 
        });


       
</script>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值