以常州市新北区为例
必须加上百度地图的api
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=xxxxxxxx"></script>
<title>自定义区域边界获取</title>
</head>
<body>
<div id="allmap" style="height:80%;width:100%;"></div>
<input type="button" onclick="getpoints()" value="点击获取集合(F12下查看结果)" />
<input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" />
<!--<input type="button" οnclick="map.clearOverlays(); document.getElementById('info').innerHTML = ''; points = [];" value="清除" />-->
<br />
<textarea id="info" style="height:130px;width:100%;"></textarea>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(120.49, 31.15), 12); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("常州市新北区"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableContinuousZoom(true); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件//------------------------ 显示镇级范围 ------------------
var polygons = [];
function getBoundary() {
var bdary = new BMap.Boundary();
bdary.get("常州市新北区", function (rs) { //获取行政区域
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
//ply.enableEditing(); //范围可编辑
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
});
var areas = [];
var 春江镇 = "119.793202,32.041939;119.783429,32.021369;119.785154,32.011082;119.919684,32.013531;119.904161,32.04145;119.905886,32.052713;119.893238,32.047326;119.882314,32.051733;119.880015,32.059078;119.875415,32.062505;119.855293,32.063974;119.842645,32.060547;119.830572,32.058588;119.80815,32.061526;119.796652,32.049775;119.794352,32.042919;";
var 孟河镇 = "119.790325,32.01131;119.783426,31.985832;119.934054,32.005431;119.913357,32.014249;119.790325,32.015229;";
var 新桥镇 = "119.783426,31.985832;119.774802,31.962798;119.784001,31.946622;119.86219,31.994652;119.785151,31.986322;";
var 薛家镇 = "119.842068,31.981912;119.879437,31.960347;119.918531,31.954956;119.978898,31.962308;119.9605,32.005921;119.93118,32.00886;119.932904,32.005921;119.864489,31.996612;119.843792,31.982892;"
var 罗溪镇 = "119.96165,32.007391;119.978898,31.967209;120.018567,31.97113;120.019142,31.979462;120.020866,31.976521;119.990971,32.01131;119.985796,32.018658;119.9605,32.01033;119.9605,32.01033;119.9605,32.01033;";
var 西夏墅镇 = "119.785151,31.947112;119.798374,31.935836;119.916807,31.954465;119.879437,31.962308;119.843217,31.981912;119.786301,31.949073;";
var 奔牛镇 = "119.883462,31.947602;119.89611,31.899057;119.814472,31.860791;119.781701,31.856865;119.777677,31.856374;119.770203,31.865698;119.771353,31.87502;119.761579,31.888756;119.758705,31.895623;119.768478,31.897585;119.777677,31.906904;119.787451,31.908376;119.7886,31.920636;119.770778,31.922597;119.769053,31.931914;119.788026,31.929462;119.794925,31.929952;119.800674,31.937307;119.883462,31.948583;119.883462,31.948583;";
var 河海街道 = "119.882887,31.948583;119.895535,31.900038;120.016842,31.88336;120.021441,31.889737;120.008218,31.899057;120.005344,31.902;120.009943,31.916713;120.026615,31.92603;120.013967,31.939758;120.019142,31.96966;119.978898,31.96819;119.980622,31.963288;119.882887,31.950054;";
var 三井街道 = "119.923131,31.893661;119.909333,31.851467;119.900134,31.85343;119.899559,31.850976;119.89611,31.854902;119.880012,31.830363;119.866789,31.836253;119.850691,31.81809;119.831719,31.822018;119.815047,31.81269;119.811597,31.811708;119.805273,31.816126;119.800099,31.815636;119.796074,31.819072;119.797224,31.833798;119.808435,31.840425;119.807573,31.845087;119.817346,31.858828;119.811597,31.860791;119.89611,31.899547;119.923993,31.895869;119.923131,31.894888;";
var 龙虎塘街道 = "119.923418,31.895869;119.90962,31.852448;119.915082,31.85024;119.917094,31.840425;119.934629,31.830363;119.931754,31.817599;119.947277,31.810726;119.957051,31.810726;119.956763,31.813672;119.962512,31.81539;119.963662,31.814163;119.982634,31.808762;119.985796,31.804343;119.986659,31.801397;120.001319,31.811953;120.016267,31.815636;120.018567,31.822018;120.012818,31.830363;120.009655,31.83478;120.012818,31.843615;120.007356,31.846069;120.005919,31.852939;119.995283,31.860055;120.009943,31.866188;120.009943,31.869132;120.015117,31.872076;120.019429,31.878209;120.020004,31.883115;120.016267,31.88385;119.923418,31.896114;";
areas.push(春江镇);
areas.push(孟河镇);
areas.push(新桥镇);
areas.push(薛家镇);
areas.push(罗溪镇);
areas.push(西夏墅镇);
areas.push(奔牛镇);
areas.push(河海街道);
areas.push(三井街道);
areas.push(龙虎塘街道);
colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53"];
var pointArray = [];
for (var i = 0; i < areas.length; i++) {
var ply = new BMap.Polygon(areas[i], { strokeWeight: 1, strokeColor: "#ff0000" }); //建立多边形覆盖物
ply.setFillColor(colors[i]) //设置多边形的填充颜色
ply.setFillOpacity(0.35);
polygons.push(ply); //加入多边形数组，以之后获取多边形边界点集
//if (i == 3) {
// ply.enableEditing(); //范围可编辑 【编辑的时候开启】
//}
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
}
setTimeout(function () {
getBoundary();
}, 1000);
function addlabel() {
var pointArray = [
new BMap.Point(119.839914, 32.034165), //春江镇
new BMap.Point(119.820221, 32.004451), //孟河镇
new BMap.Point(119.800099, 31.975541), //新桥镇
new BMap.Point(119.904158, 31.979952), //薛家镇
new BMap.Point(119.987521, 31.989262), //罗溪镇
new BMap.Point(119.819071, 31.953485), //西夏墅镇
new BMap.Point(119.804698, 31.900528), //奔牛镇
new BMap.Point(119.934054, 31.928482), //河海街道
new BMap.Point(119.838618,31.85343), //三井街道
new BMap.Point(119.938366, 31.858828) //龙虎塘街道
];
var optsArray = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}];
var labelArray = [];
var contentArray = [
"春江镇", "孟河镇", "新桥镇", "薛家镇", "罗溪镇", "西夏墅镇", "奔牛镇", "河海街道", "三井街道", "龙虎塘街道"];
for (var i = 0; i < pointArray.length; i++) {
optsArray[i].position = pointArray[i];
labelArray[i] = new BMap.Label(contentArray[i], optsArray[i]);
labelArray[i].setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
map.addOverlay(labelArray[i]);
}
}
//获取编辑后的边界点集【编辑完后，可以通过 button 来触发这个方法】
function getpoints() {
for (var j = 0; j < polygons.length; j++) {
var polyline = polygons[j];
var pts = polyline.getPath();
var sss = "";
for (var i = 0; i < pts.length; i++) {
sss += pts[i].lng + "," + pts[i].lat + ";";
}
console.log(sss); //【将点集输出到控制台】
}
alert('已输出边界点集合!');
}
//以下为绘制边界
var key = 1; //开关
var newpoint; //一个经纬度
var points = []; //数组，放经纬度信息
var polyline = new BMap.Polyline(); //折线覆盖物
function startTool() { //开关函数
if (key == 1) {
document.getElementById("startBtn").value = "开启状态";
key = 0;
}
else {
document.getElementById("startBtn").value = "关闭状态";
key = 1;
}
}
map.addEventListener("click", function (e) { //单击地图，形成折线覆盖物
newpoint = new BMap.Point(e.point.lng, e.point.lat);
if (key == 0) {
// if(points[points.length].lng==points[points.length-1].lng){alert(111);}
points.push(newpoint); //将新增的点放到数组中
polyline.setPath(points); //设置折线的点数组
map.addOverlay(polyline); //将折线添加到地图上
document.getElementById("info").innerHTML += e.point.lng + "," + e.point.lat + ";"; //输出数组里的经纬度
}
});
map.addEventListener("dblclick", function (e) { //双击地图，形成多边形覆盖物
if (key == 0) {
map.disableDoubleClickZoom(); //关闭双击放大
var polygon = new BMap.Polygon(points);
map.addOverlay(polygon); //将折线添加到地图上
}
});
</script>