這段時間公司需要能夠自定義邊界，百度地圖只能提供行政區以上的邊界。所以先做了個demo，不多說，上圖上代碼。
所需js：
<script type="text/javascript" src="jquery-1.7.js"/></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yourkey"></script>html代碼：
<body>
<div id="allmap" style="height:600px;"></div>
<div style="height:600px;">
<label for="pointAy">座標點:</label>
<textarea id="pointAy" disabled=true name="pointAy" clos="15" rows="3"></textarea>
<button id=startEdit onclick="clearStr()">清空座標點</button>
<input type="button" onclick="addPol()" value="添加多邊形">
<button id=startEdit onclick="edit('start')">啓用多邊形編輯</button>
<button id="stopEdit" onclick="edit('stop')">關閉多邊形編輯</button>
<button id="open" onclick="getAllPoints()">獲取單個端局所有點</button>
<label for="staPoint">端局點:</label>
<textarea id="staPoint" clos="15" rows="3"></textarea>
<button id="clear" onclick="clearPol()">刪除所有多邊形</button>
</div>
</body>
js代碼：
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(121.441932, 31.151924), 12);
map.enableScrollWheelZoom();
addClick();
function clearStr(){
$("#pointAy").text('');
}
function showInfo(e){
var str=e.point.lng + ", " + e.point.lat+";";
$("#pointAy").append(str);
}
function addClick(){
map.addEventListener("click", showInfo);
}
function removeClick(){
map.removeEventListener("click", showInfo);
}
function addPol(){
var points=($("#pointAy").val()).split(";");
subStationName=prompt("請輸入添加的地名:","");
if(subStationName==''||subStationName==null){
alert("輸入地名!");
return;
}
if(points.length<4){
alert("最少3個點!");
return;
}
$("#pointAy").text('');
var mapPoint=[];
for(var i=0;i<points.length;i++){
if(points[i]!=''){
var x=parseFloat((points[i].split(','))[0]);
var y=parseFloat((points[i].split(','))[1]);
mapPoint.push(new BMap.Point(x,y));
}
}
var polygon = new BMap.Polygon(mapPoint, {strokeColor:getRandomColor(), strokeWeight:2, strokeOpacity:0.5,fillColor:getRandomColor()}); //創建多邊形
polygon.name=subStationName;
map.addOverlay(polygon); //增加多邊形
polygon.enableEditing();
}
function clearPol(){
clearStr();
$("#staPoint").val('');
map.clearOverlays();
}
function getAllPoints(){
var flag=false;
var name = prompt("請輸入獲取的地名:","");
if (name != null){
if(name==''){
alert("未輸入地名!");
}else{
var overlays=map.getOverlays();
for(var i=0;i<overlays.length;i++){
var overlay=overlays[i];
if(overlay.name){
if(name==overlay.name){
var points=overlay.getPath(),pointStr='';
for(var j=0;j<points.length;j++){
pointStr+=points[j].lng+","+points[j].lat+";";
}
$("#staPoint").val(pointStr);
flag=true;
}
}
}
if(!flag){
alert("沒有匹配的區域!");
}
}
}else{
alert("你按了[取消]按鈕");
}
}
function edit(flag){
var overlays=map.getOverlays();
for(var i=0;i<overlays.length;i++){
var overlay=overlays[i];
if(overlay.name){
if(flag=="start"){
overlay.enableEditing();
}else{
overlay.disableEditing();
}
}
}
}
var getRandomColor = function(){
return '#'+(function(h){
return new Array(7-h.length).join("0")+h
})((Math.random()*0x1000000<<0).toString(16))
}
因爲是demo，所以代碼有點亂，但是肯定是可以運行。
我說下具體步驟：
1，地圖上點三個點
2，點擊添加多邊形，輸入添加的區域名稱 （1,2可以多次操作）
3，拖動邊緣的小正方形來自定義邊界
4，啓用編輯和關閉編輯是爲了更方便的看清邊界（有正方形的小框看不清）
5，點擊獲取所有點，輸入添加的單個區域名稱，就能獲取到單個區域所有的邊界點了。
這個比較簡單，所以就說了下這個demo.希望對大家有所幫助。
具體實戰的效果見下圖：
利用行政區的層來做一個遮罩，然後把行政區分爲多個區域。