這兩天在實驗百度地圖的api，老實說做的還蠻好使的，不過我這需要的行政區選擇和反選功能還是不怎么好實現，實踐了一下總算找到了一個比較好一點的解決辦法。
行政區選擇其實沒啥好說的，就是直接拿出行政區名字來調用BMap.Boundary().get(districtName,callback)就可以了
反選尤其是不確定多少個行政區時候的反選才是個麻煩。
我自己選擇的方式是找出咱國家四個角端點的經緯度，然后以此畫一個閉合折線，再連接選中的區域，再連接四角端點，依次類推
優點是省事&節省資源（我懶_(:з」∠)_）
缺點是不能開描邊，不然你就會看到一堆額外的連向西北（左上）的線。
具體代碼直接扔到下面了（包括選區&綁定事件&畫屏蔽層）
第一次寫寫的有點亂……反正也是拿來當備忘的所以隨意了。
另外有一點想吐槽的……為啥設透明度為0的話無效呢
補個效果圖吧（
更正：發現原來的思路想錯了一點，每次加完新的點數組后只要再加一下初始點就可以閉合了
源碼（更新1.1版本，直接給了可以使用的demo，copy出來改成.html即可看效果，不過請不要忘了改ak）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=請將這里替換成你的ak值"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type='text/javascript'>
//提示：下面的代碼用jquery，所以如果有不能運行的情況請引用后嘗試
//百度地圖api container對應前端div名稱 前端要引用2.0版本的百度地圖api
//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js
var map = new BMap.Map("container", { enableMapClick: false }); // 創建地圖實例，禁止點擊地圖底圖
//設置樣式
map.setMapStyle({
styleJson: [
{//不顯示點信息
"featureType": "poi",
"elementType": "all",
"stylers": {
"color": "#ffffff",
"visibility": "off"
}
}
]
});
map.disableDragging();//禁止拖動
map.disableDoubleClickZoom();//禁止雙擊縮放
var blist = [];
var districtLoading = 0;
function getBoundary() {
addDistrict("海淀區");
addDistrict("朝陽區");
addDistrict("順義區");
addDistrict("通州區");
}
/**
* 添加行政區划
* @param {} districtName 行政區划名
* @returns 無返回值
*/
function addDistrict(districtName) {
//使用計數器來控制加載過程
districtLoading++;
var bdary = new BMap.Boundary();
bdary.get(districtName, function (rs) { //獲取行政區域
var count = rs.boundaries.length; //行政區域的點有多少個
if (count === 0) {
alert('未能獲取當前輸入行政區域');
return;
}
for (var i = 0; i < count; i++) {
blist.push({ points: rs.boundaries[i], name: districtName });
};
//加載完成區域點后計數器-1
districtLoading--;
if (districtLoading == 0) {
//全加載完成后畫端點
drawBoundary();
}
});
}
/**
* 各種鼠標事件綁定
*/
function click(evt) {
alert(evt.target.name);
}
function mouseover(evt) {
evt.target.label.setZIndex(99);
evt.target.label.setPosition(evt.point);
evt.target.label.show();
}
function mousemove(evt) {
evt.target.label.setPosition(evt.point);
}
function mouseout(evt) {
evt.target.label.hide();
}
function drawBoundary() {
//包含所有區域的點數組
var pointArray = [];
/*畫遮蔽層的相關方法
*思路: 首先在中國地圖最外畫一圈，圈住理論上所有的中國領土，然后再將每個閉合區域合並進來，並全部連到西北角。
* 這樣就做出了一個經過多次西北角的閉合多邊形*/
//定義中國東南西北端點，作為第一層
var pNW = { lat: 59.0, lng: 73.0 }
var pNE = { lat: 59.0, lng: 136.0 }
var pSE = { lat: 3.0, lng: 136.0 }
var pSW = { lat: 3.0, lng: 73.0 }
//向數組中添加一次閉合多邊形，並將西北角再加一次作為之后畫閉合區域的起點
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循環添加各閉合區域
for (var i = 0; i < blist.length; i++) {
//添加顯示用標簽層
var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
label.hide();
map.addOverlay(label);
//添加多邊形層並顯示
var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多邊形覆蓋物
ply.name = blist[i].name;
ply.label = label;
ply.addEventListener("click", click);
ply.addEventListener("mouseover", mouseover);
ply.addEventListener("mouseout", mouseout);
ply.addEventListener("mousemove", mousemove);
map.addOverlay(ply);
//添加名稱標簽層
var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
centerlabel.setPosition(ply.getBounds().getCenter());
map.addOverlay(centerlabel);
//將點增加到視野范圍內
var path = ply.getPath();
pointArray = pointArray.concat(path);
//將閉合區域加到遮蔽層上，每次添加完后要再加一次西北角作為下次添加的起點和最后一次的終點
pArray = pArray.concat(path);
pArray.push(pArray[0]);
}
//限定顯示區域，需要引用api庫
var boundply = new BMap.Polygon(pointArray);
BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
map.setViewport(pointArray); //調整視野
//添加遮蔽層
var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000", fillOpacity: 0.4 }); //建立多邊形覆蓋物
map.addOverlay(plyall);
}
setTimeout(function () {
getBoundary();
}, 100);
</script>
</body>