先放一張最后的效果圖
主要功能：只顯示天府新區（雙流區+龍泉驛區）這一塊，其他的地方就用半透明的遮罩層蓋住，然后用Markers標注出每個項目的所在地點，當鼠標懸浮在標注點的時候就顯示出項目名稱。
html代碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 7 <title>百度地圖api簡單使用</title> 8 <style type="text/css"> 9 body, 10 html { 11 width: 100%; 12 height: 100%; 13 margin: 0; 14 font-family: "微軟雅黑"; 15 } 16 17 #l-map { 18 height: 600px; 19 width: 100%; 20 } 21 22 #r-result { 23 width: 100%; 24 font-size: 14px; 25 line-height: 20px; 26 } 27 </style> 28 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己申請的百度開發者ak"></script> 29 <!--限定顯示區域api庫--> 30 <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script> 31 <!--引入自己的js文件--> 32 <script type="text/javascript" src="myMap.js"></script> 33 </head> 34 <body> 35 <!--地圖容器--> 36 <div id="myMap"></div> 37 </body> 38 </html>
myMap.js代碼
1 // 創建地圖實例 2 var map = new BMap.Map("myMap",{enableMapClick: false}); 3 //以四川省為地圖中心，顯示層級為13 4 map.centerAndZoom("四川省", 13); 5 //允許滾動鼠標縮放地圖 6 map.enableScrollWheelZoom(true); 7 setTimeout(function() { 8 map.enableDragging(); //兩秒后開啟拖拽 9 }, 2000); 10 var index = 0; 11 var myGeo = new BMap.Geocoder(); 12 //需要批量解析顯示的地址 13 var adds = [ 14 "煎茶鎮", 15 "新興鎮", 16 "永安鎮", 17 "白家溝", 18 "正興鎮", 19 "萬安鎮", 20 "南湖濕地公園" 21 ]; 22 var blist = []; 23 var districtLoading = 0; 24 25 function getBoundary() { 26 //設置指定顯示區域雙流、龍泉驛 27 addDistrict("成都市雙流區"); 28 addDistrict("成都市龍泉驛區"); 29 } 30 31 function addDistrict(districtName) { 32 //使用計數器來控制加載過程 33 districtLoading++; 34 var bdary = new BMap.Boundary(); 35 bdary.get(districtName, function(rs) { //獲取行政區域 36 var count = rs.boundaries.length; //行政區域的點有多少個 37 if(count === 0) { 38 alert('未能獲取當前輸入行政區域'); 39 return; 40 } 41 for(var i = 0; i < count; i++) { 42 blist.push({ points: rs.boundaries[i], name: districtName }); 43 }; 44 //加載完成區域點后計數器-1 45 districtLoading--; 46 if(districtLoading == 0) { 47 //全加載完成后畫端點 48 drawBoundary(); 49 } 50 }); 51 } 52 53 function drawBoundary() { 54 //包含所有區域的點數組 55 var pointArray = []; 56 57 /*畫遮蔽層的相關方法 58 *思路: 首先在中國地圖最外畫一圈，圈住理論上所有的中國領土，然后再將每個閉合區域合並進來，並全部連到西北角。 59 * 這樣就做出了一個經過多次西北角的閉合多邊形*/ 60 //定義中國東南西北端點，作為第一層 61 var pNW = { lat: 59.0, lng: 73.0 } 62 var pNE = { lat: 59.0, lng: 136.0 } 63 var pSE = { lat: 3.0, lng: 136.0 } 64 var pSW = { lat: 3.0, lng: 73.0 } 65 //向數組中添加一次閉合多邊形，並將西北角再加一次作為之后畫閉合區域的起點 66 var pArray = []; 67 pArray.push(pNW); 68 pArray.push(pSW); 69 pArray.push(pSE); 70 pArray.push(pNE); 71 pArray.push(pNW); 72 //循環添加各閉合區域 73 for(var i = 0; i < blist.length; i++) { 74 //添加顯示用標簽層 75 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) }); 76 label.hide(); 77 map.addOverlay(label); 78 79 //添加多邊形層並顯示 80 var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#5185E6", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多邊形覆蓋物 81 ply.name = blist[i].name; 82 ply.label = label; 83 map.addOverlay(ply); 84 85 //將點增加到視野范圍內 86 var path = ply.getPath(); 87 pointArray = pointArray.concat(path); 88 //將閉合區域加到遮蔽層上，每次添加完后要再加一次西北角作為下次添加的起點和最后一次的終點 89 pArray = pArray.concat(path); 90 pArray.push(pArray[0]); 91 } 92 93 //限定顯示區域，需要引用api庫 94 var boundply = new BMap.Polygon(pointArray); 95 BMapLib.AreaRestriction.setBounds(map, boundply.getBounds()); 96 map.setViewport(pointArray); //調整視野 97 98 //添加遮蔽層(描邊線條，遮罩層顏色) 99 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#fff", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 1 }); //建立多邊形覆蓋物 100 map.addOverlay(plyall); 101 } 102 103 function bdGEO() { 104 var add = adds[index]; 105 geocodeSearch(add); 106 index++; 107 } 108 getBoundary(); 109 function geocodeSearch(add) { 110 if(index < adds.length) { 111 setTimeout(window.bdGEO, 400); 112 } 113 myGeo.getPoint(add, function(point) { 114 if(point) { 115 var address = new BMap.Point(point.lng, point.lat); 116 addMarker(address, new BMap.Label(add, { offset: new BMap.Size(20, -10) })); 117 } 118 }, "成都市"); 119 } 120 // 編寫自定義函數,創建標注 121 function addMarker(point, label) { 122 //使用自定義圖標做標注點，寬高為8 10 123 var myIcon = new BMap.Icon("marker_red_sprite2.png", new BMap.Size(8, 10)); 124 var marker = new BMap.Marker(point,{icon: myIcon}); 125 map.addOverlay(marker); 126 marker.setLabel(label); 127 label.setStyle({ 128 display:"none" 129 }) 130 marker.addEventListener("mouseover",function(e){ 131 var label = this.getLabel(); 132 //設置label的樣式，這里沒有過多要求，能顯示出來就行 133 label.setStyle({ 134 display:"block", 135 borderRadius:"2px", 136 border:"1px solid #5185E6", 137 padding:"2px 4px" 138 }) 139 }); 140 marker.addEventListener("mouseout",function(e){ 141 var label = this.getLabel(); 142 label.setStyle({ 143 display:"none" 144 }) 145 }); 146 } 147 bdGEO();
原作者：https://www.cnblogs.com/HCVOLCANO/archive/2012/09/12/2681719.html