标签：map 边界 自定义 Point BMap var new 百度 areas
以常州市新北区为例
必须加上百度地图的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>
标签：map,边界,自定义,Point,BMap,var,new,百度,areas 来源： https://blog.csdn.net/weixin_45152566/article/details/121380186
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。