这段时间公司需要能够自定义边界，百度地图只能提供行政区以上的边界。所以先做了个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.希望对大家有所帮助。
具体实战的效果见下图：
利用行政区的层来做一个遮罩，然后把行政区分为多个区域。