最近項目中遇到一個地圖顯示的問題
從數據庫查詢到一個數據集，其中每條數據都包含自己的地理位置信息（經度、緯度、省、市），需要在地圖上顯示這些數據的分布，並高亮顯示
省市字段的值並不規范，可能由於填寫並不正確而找不到經緯度
於是我打算通過表中的經緯度逆向解析省市名稱，再描繪省市的邊框，填充顏色從而達到高亮顯示的效果
這里我圖方便直接用省市名稱了，如果你想通過經緯度獲取省市名稱，只需調用下面的連接即可
http://api.map.baidu.com/geocoder/v2/?ak=你的ak值&callback=renderReverse&location=36.131234,114.297000&output=json&pois=1
先看運行效果
請注意我把演示代碼傳到了github上，由於github是基於https協議的，不允許引用http的腳本
所以應該把百度地圖api連接改為如下格式，參數加一個s=1
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的ak值&s=1"></script>
jquery也改為CDN的標准連接
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
下面是代碼
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>
運行效果如下
