百度地图行政区域高亮显示升级版

前几天写的博客，使用百度API实现了行政区域高亮显示，见下面的连接。

百度地图实现行政区域高亮显示

现在要进一步完善这个功能：

1、使用地理反解析经纬度，获得行政区域的值

2、二级行政区域（省下面的市）显示颜色加重

3、二级行政区域下添加分布点的标注

4、点击分布点弹出该标注的详细信息

关于第一点，我本来以为百度地图API的反解析接口是可以无限制使用的，后来才知道其使用配额是有限的

也就是说，每天调用接口的数量，以及每分钟调用的次数，都是有限的

未认证用户每天的调用次数最多6000次。因此要先申请认证，成为百度的认证用户才可以得到更多的配额。升级为认证用户是免费的，但需要3-5个工作日的审核。如果还是不够用可以通过收费渠道购买配额。

关于第二点，本来我的思路是，判断覆盖层是省还是市，如果是省设置为浅颜色的填充，如果是市则设置深颜色的填充。做之前感觉思路是没问题的，然而运行后的效果有时候正确，有时候只显示深色，有时候浅色。当我百思不得其解的时候，试着仅设置城市的填充色，结果省的填充色竟然自动变浅了。

关于第三点，在地图上添加标注是很简单的了，但有个问题是，如果在全国范围内添加全部采集点的分布，就显得太拥挤，能不能在放大到一定级别的时候，再显示这些采集点的标注呢？答案是肯定的。API提供了一个getZoom()方法，可以获取到当前map的缩放比例，再添加一个鼠标滑轮变化的事件，就可以根据缩放比例去显示和移除这些标记了。然而js本身并没有提供鼠标滑轮变化的事件，我们需要引用一个第三方的jquery库，jquery.mousewheel.js，这个可以在CDN找到的。其使用方法可以自己百度。

关于第四点，也是很简单的，只要注册一个点击事件，在弹出的div框中显示数据库中读取的数据就OK了。

在做这个效果时还遇到了其他各种各样的问题，最后终于完成了。下面看代码。

  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="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
  9     <script src="/js/getrequest.js"></script>
 10     <script src="/js/FormatDate.js"></script>
 11     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TgvCNe2d0HTMpHGKPdcKrWHQvyrM01BY"></script>
 12     <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
 13     <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
 14     <style type="text/css">
 15         html, body {
 16             margin: 0px;
 17             padding: 0px;
 18             height: 100%;
 19         }
 20         #container {
 21             height: 100%;
 22         }
 23         .spinfo{
 24             line-height: 1em;
 25             height: 1em;
 26         }
 27     </style>
 28 </head>
 29 
 30 <body>
 31 <div id="container"></div>
 32 
 33 <script type='text/javascript'>
 34 var params = GetRequest();
 35 var map = new BMap.Map("container",{ minZoom : 5,maxZoom:20 }); // 创建地图实例
 36 //设置个性化样式，不显示道路
 37 map.setMapStyle({
 38       styleJson:  [{
 39             "featureType": "road",
 40             "elementType": "all",
 41             "stylers": {
 42                     "color": "#ffffff",
 43                     "visibility": "off"
 44                    }
 45             }]
 46 });
 47 
 48 map.enableScrollWheelZoom(); //允许鼠标滑轮缩放
 49 map.enableDragging(); //允许拖拽
 50 map.disableDoubleClickZoom(); //禁用双击鼠标缩放
 51 
 52 /*
 53 =====从数据库获取照片数据=====
 54 */
 55 $.get("../AjaxServer/SpeciesServ.ashx", { action: "getphotoinfobyspid", spid: params.spid }, function (data) {
 56       var response = $.parseJSON(data);
 57      // console.log(response);
 58       //遍历照片数据，通过地理信息获取省市名称
 59       for(var i=0;i<response.Table.length;i++){
 60          getAddressByLatLng(response.Table[i].Longitude,response.Table[i].Latitude,response.Table[i]);
 61       }
 62 })
 63 
 64 var arrCities = [];  //用于存放城市名称
 65 var arrProvices = [];  //用于存放省名称
 66 /*
 67 =====通过经纬度得到省市名称，并获取行政区域边界=====
 68 */
 69 function getAddressByLatLng(longitude,latitude,info){
 70      $.ajax({
 71          url:"http://api.map.baidu.com/geocoder/v2/?ak=TgvCNe2d0HTMpHGKPdcKrWHQvyrM01BY&callback=renderReverse&location="+latitude+","+longitude+"&output=json&pois=1", //由经纬度反地理编码得到地理位置信息
 72          dataType:"jsonp",   //JSONP跨域请求
 73          success:function(data){    
 74               var address = data.result.addressComponent;
 75               //console.log(data)
 76                //将省名称去重存入数组
 77                if($.inArray(address.province,arrProvices)==-1 && address.province){
 78                   arrProvices.push(address.province);
 79                   getBoundary(address.province); //描绘省边界
 80                }
 81 
 82                //将城市名称去重存入数组(注意有的城市名和省名一样，如上海市)
 83               if($.inArray(address.city,arrCities)==-1 && $.inArray(address.city,arrProvices)==-1 && address.city){
 84                   arrCities.push(address.city);
 85                   getBoundary(address.city);  //描绘城市边界
 86                   var collectPoint = { point: new BMap.Point(longitude,latitude), info: info }; //采集点
 87                   arrCollectPoints.push(collectPoint);  //添加至采集点标注数组
 88                }
 89 
 90            },
 91           error:function(XMLHttpRequest,status,e){ 
 92                console.log(status+","+XMLHttpRequest.status); 
 93            } 
 94     });
 95 }
 96 /*
 97 ======打开信息窗口，显示物种信息======
 98 */
 99  function openInfo(e,info) {
100      var p = e.target;
101      var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
102      var CName =  info.CName == undefined ? "" : info.CName;
103      var LName = info.LName == undefined ? "" : info.LName;
104      var AuthorColSN = info.AuthorColSN == undefined ? "" : info.AuthorColSN;
105      var Province = info.Province == undefined ? "" : info.Province;
106      var City = info.City == undefined ? "" : info.City;
107      var Place = info.Place == undefined ? "" : info.Place;
108      var Author = info.Author == undefined ? "" : info.Author;
109      var TakeTime = info.TakeTime == undefined ? "" : info.TakeTime;
110      var content = "<div class='spinfo'><span>" + CName + "  ( " + LName + " )<span></div>";
111      content += "<div><span>采集号：" + AuthorColSN + "<span></div>";
112      content += "<div><span>采集地：" + Province + City + Place + "<span></div>";
113      content += "<div><span>采集人：" + Author  + "<span></div>";
114      content += "<div><span>采集时间：" + FormatDate(TakeTime,"cdate")  + "<span></div>";
115      var infoWindow = new BMap.InfoWindow(content, {300,height:120,title:""});  // 创建信息窗口对象 
116      map.openInfoWindow(infoWindow, point); //开启信息窗口
117  }
118 
119 /*
120 =====鼠标滑轮滚动事件=====
121 */
122 var arrCollectPoints = [];  //保存采集点标注
123 var arrPointMarker = [];   //保存采集点覆盖物
124 $("body").bind("mousewheel",function(){
125     if(map.getZoom()>=7){ 
126           for(var i=0;i<arrCollectPoints.length;i++){
127              var point = arrCollectPoints[i].point;
128              var info = arrCollectPoints[i].info;
129              var marker = new BMap.Marker(point);
130              //在标注点上单击鼠标，弹出采集点的详细信息
131              marker.addEventListener("click", function (e) { openInfo(e,info); }, false); 
132              arrPointMarker.push(marker);
133              map.addOverlay(marker);
134          }
135     }
136     else{
137           for(var i=0;i<arrPointMarker.length;i++){
138             map.removeOverlay(arrPointMarker[i]);
139           }
140          arrPointMarker.length = 0;
141       }
142     
143 })
144 
145 
146 /*
147 =====获取行政区域边界=====
148 */
149 function getBoundary(location) {   
150     addDistrict(location);
151 }
152 
153 var blist = [];
154 var districtLoading = 0;
155 /*
156 =====添加行政区域=====
157 */
158 function addDistrict(districtName) {
159     //使用计数器来控制加载过程
160     districtLoading++;
161     var bdary = new BMap.Boundary();
162     bdary.get(districtName, function (rs) {       //获取行政区域
163         var count = rs.boundaries.length; //行政区域的点有多少个
164         for (var i = 0; i < count; i++) {
165             blist.push({ points: rs.boundaries[i], name: districtName });
166         };
167         //加载完成区域点后计数器-1
168         districtLoading--;
169         if (districtLoading == 0) {
170             //全加载完成后画端点
171             drawBoundary("#3385FF");
172         }
173     });
174 }
175 
176 /*
177 =====点击行政区域事件=====
178 */
179 function click(evt) {
180     console.log(evt.target.name);
181 }
182 /*
183 =====绘制边界=====
184 */
185 function drawBoundary(fillColor) {
186     //包含所有区域的点数组
187     var pointArray = [];
188     //循环添加各闭合区域
189     for (var i = 0; i < blist.length; i++) {
190         //添加多边形层并显示
191         var ply = new BMap.Polygon(blist[i].points, { 
192                                           strokeWeight: 1,   //边框宽度
193                                           trokeColor: "#014F99",   //边框颜色
194                                           fillColor: fillColor //填充颜色
195                                        }); //建立多边形覆盖物
196         ply.name = blist[i].name;
197         ply.addEventListener("click", click);
198         map.addOverlay(ply);
199 
200         //将点增加到视野范围内
201         var path = ply.getPath();
202         pointArray = pointArray.concat(path);
203     }
204     map.setViewport(pointArray);    //调整视野 
205 }
206 
207 </script>
208 </body>
209 </html>

采集点信息是从数据库读取的，要演示的话必须要将数据源做成JSON格式，我就不去做了。下面直接看运行效果：