  1 <!DOCTYPE html>
  2 
  3 <html>
  4 <head>
  5     <meta name="viewport" content="width=device-width" />
  6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7     <title></title>
  8     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  9     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>
 10     <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
 11     
 12     <style type="text/css">
 13         html, body {
 14             margin: 0px;
 15             padding: 0px;
 16         }
 17         #container {
 18             height: 600px;
 19         }
 20     </style>
 21 </head>
 22 
 23 <body>
 24     <div id="container"></div>
 25 
 26 
 27 <script type='text/javascript'>
 28 //需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
 29 var map = new BMap.Map("container",{ minZoom : 5,maxZoom:20 }); // 创建地图实例
 30 //设置个性化样式
 31 map.setMapStyle({
 32       styleJson:  [{
 33             "featureType": "road",
 34             "elementType": "all",
 35             "stylers": {
 36                     "color": "#ffffff",
 37                     "visibility": "off"
 38                    }
 39             }]
 40 });
 41 
 42 map.enableScrollWheelZoom();
 43 map.enableDragging();
 44 map.disableDoubleClickZoom();
 45 
 46 var blist = [];
 47 var districtLoading = 0;
 48 
 49 /*
 50 =====获取行政区域边界=====
 51 */
 52 function getBoundary() {   
 53     addDistrict("辽宁省");
 54     addDistrict("河北省");
 55     addDistrict("陕西省");
 56     addDistrict("江西省");
 57     addDistrict("石家庄");
 58     addDistrict("青岛");
 59 }
 60 
 61 /*
 62 =====添加行政区域=====
 63 */
 64 function addDistrict(districtName) {
 65     //使用计数器来控制加载过程
 66     districtLoading++;
 67     var bdary = new BMap.Boundary();
 68     bdary.get(districtName, function (rs) {       //获取行政区域
 69         var count = rs.boundaries.length; //行政区域的点有多少个
 70         for (var i = 0; i < count; i++) {
 71             blist.push({ points: rs.boundaries[i], name: districtName });
 72         };
 73         //加载完成区域点后计数器-1
 74         districtLoading--;
 75         if (districtLoading == 0) {
 76             //全加载完成后画端点
 77             drawBoundary();
 78         }
 79     });
 80 }
 81 
 82 /*
 83 =====点击行政区域事件=====
 84 */
 85 function click(evt) {
 86     alert(evt.target.name);
 87 }
 88 /*
 89 =====绘制边界=====
 90 */
 91 function drawBoundary() {
 92     //包含所有区域的点数组
 93     var pointArray = [];
 94     //循环添加各闭合区域
 95     for (var i = 0; i < blist.length; i++) {
 96         //添加多边形层并显示
 97         var ply = new BMap.Polygon(blist[i].points, { 
 98                                           strokeWeight: 1,   //边框宽度
 99                                           trokeColor: "#014F99",   //边框颜色
100                                           fillColor: " #DDE4F0" //填充颜色
101                                        }); //建立多边形覆盖物
102         ply.name = blist[i].name;
103         ply.addEventListener("click", click);
104         map.addOverlay(ply);
105 
106         //将点增加到视野范围内
107         var path = ply.getPath();
108         pointArray = pointArray.concat(path);
109     }
110 
111     //限定显示区域(只显示特定区域，鼠标拖动松开后自动回到显示范围内)，需要引用api库
112    // var boundply = new BMap.Polygon(pointArray);
113    // BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
114     map.setViewport(pointArray);    //调整视野 
115 }
116 
117 setTimeout(function () {
118     getBoundary();
119 }, 100);
120 </script>
121 </body>
122 </html>
运行效果如下
posted on 2018-04-18 21:05 teagueli 阅读(16419) 评论(0) 编辑收藏举报
刷新页面返回顶部
导航
