昆山各个镇地图（自己画的，画的不行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<button onclick="getpoints()">点击</button>
<button onclick="create()">生成</button>
<button onclick="clean()">清空</button>
<div id="map"></div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
<script type="text/javascript">
var strs = "";
// 百度地图API功能
var map = new BMap.Map("map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(120.987239,31.391653), 12.5); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("昆山"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
map.enableContinuousZoom(false); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT })); //向地图中添加比例尺控件
//------------------------ 显示镇级范围 ------------------
var polygons = [];
map.addEventListener("click", function(e){
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
var pt = e.point;
var ptt = pt.lng+ "," + pt.lat + ";";
console.log(pt.lng+ "," + pt.lat + ";");
strs = strs.concat(ptt);
console.log(strs);
});
function create () {
alert(strs);
}
function clean () {
strs = "";
}
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(); //范围可编辑
// polygons.push(ply);
// map.addOverlay(ply); //添加覆盖物
// pointArray = pointArray.concat(ply.getPath());
// }
// map.setViewport(pointArray); //调整视野
// addlabel();
// });
var areas = [];
var kunshan = "121.167809,31.289819;121.157847,31.297627;121.15807,31.302064;121.154357,31.303861;121.157348,31.304705;121.150358,31.315341;121.146229,31.308622;121.136514,31.308275;121.133168,31.324392;121.139881,31.332003;121.136917,31.348043;121.120769,31.348836;121.124156,31.354355;121.113432,31.357548;121.10423,31.397048;121.099778,31.393168;121.094059,31.39881;121.101185,31.417852;121.095241,31.420526;121.106138,31.429479;121.092729,31.442419;121.074043,31.427849;121.064825,31.438516;121.057945,31.435422;121.057076,31.431024;121.046241,31.438633;121.029153,31.440383;121.02557,31.453186;121.031778,31.458655;121.018259,31.463306;121.01647,31.466933;121.01602,31.472638;121.023511,31.479025;121.022768,31.485195;121.029171,31.48856;121.020307,31.495237;121.020073,31.500833;121.011134,31.498713;121.005398,31.50338;120.998559,31.501177;120.994672,31.504811;120.983448,31.49973;120.981124,31.502777;120.977114,31.501671;120.973691,31.507045;120.964666,31.505662;120.959077,31.518873;120.955116,31.518131;120.95316,31.524486;120.946856,31.523922;120.944223,31.537389;120.923806,31.524412;120.919202,31.527642;120.91908,31.535364;120.906627,31.531026;120.903768,31.533153;120.90971,31.544606;120.905709,31.546744;120.903934,31.53994;120.893677,31.540654;120.892181,31.536007;120.885154,31.536098;120.883764,31.52767;120.876233,31.516885;120.873431,31.517984;120.873929,31.508527;120.867578,31.512697;120.851917,31.513374;120.852815,31.517036;120.856582,31.517185;120.854312,31.52811;120.8221,31.525581;120.820392,31.520068;120.814502,31.519463;120.814135,31.51554;120.81847,31.515273;120.818115,31.509128;120.824053,31.509836;120.821776,31.497087;120.826106,31.496111;120.838876,31.461293;120.826121,31.402418;120.829817,31.378454;120.839418,31.377265;120.847226,31.380455;120.847664,31.372004;120.857718,31.371338;120.854557,31.36916;120.861002,31.339364;120.871163,31.313572;120.875567,31.309839;120.878219,31.298249;120.884205,31.297205;120.885928,31.290142;120.890621,31.288185;120.886815,31.285181;120.890339,31.283727;120.887353,31.280916;120.890721,31.277729;120.884611,31.275602;120.892721,31.257326;120.898182,31.256319;120.894226,31.251458;120.895319,31.242663;120.900572,31.243644;120.9082,31.234543;120.904013,31.220195;120.890998,31.221699;120.885676,31.215436;120.86589,31.218472;120.847203,31.207297;120.822059,31.19967;120.813913,31.18274;120.830265,31.175241;120.830078,31.158587;120.820956,31.15812;120.824618,31.133938;120.841963,31.128577;120.853945,31.11647;120.863182,31.112147;120.874931,31.122764;120.878476,31.132625;120.888915,31.140995;120.919751,31.141646;120.937006,31.147251;120.988733,31.138189;121.024523,31.13974;121.032271,31.148287;121.046521,31.143282;121.050532,31.160893;121.054786,31.160209;121.055283,31.155957;121.0679,31.158786;121.070542,31.154154;121.074051,31.154345;121.083068,31.17091;121.070188,31.237258;121.066495,31.242302;121.069371,31.247499;121.068155,31.274234;121.088097,31.277361;121.092968,31.297776;121.109726,31.28041;121.12015,31.290179;121.126448,31.291929;121.139792,31.284158;121.150057,31.283336;121.149642,31.280708;121.160665,31.282393;121.167809,31.289819";
areas.push(kunshan);
areas.push("120.983962,31.500796;120.956366,31.493899;120.924171,31.489958;120.909223,31.484045;120.909223,31.461378;120.901174,31.44462;120.883927,31.429831;120.883927,31.425887;120.917272,31.425887;120.916122,31.409123;120.872428,31.409123;120.872428,31.397288;120.856331,31.390383;120.848282,31.384464;120.829885,31.384464;120.828735,31.402219;120.840233,31.461378;120.821836,31.501781;120.825285,31.511633;120.819536,31.511633;120.820686,31.518528;120.816087,31.519513;120.818386,31.520499;120.821836,31.522469;120.824136,31.525424;120.854031,31.526409;120.857481,31.519513;120.857481,31.511633;120.871279,31.513603;120.874728,31.509663;120.877028,31.518528;120.885077,31.526409;120.887376,31.537243;120.896575,31.539212;120.903474,31.543151;120.906923,31.546106;120.912673,31.537243;120.912673,31.535273;120.916122,31.529363;120.941418,31.531333;120.944868,31.538227;120.951767,31.528378;120.955216,31.522469;120.967864,31.506707")
areas.push("120.911523,31.486016;120.911523,31.463349;120.883927,31.429831;120.912673,31.426873;120.918422,31.424901;120.878178,31.409123;120.875878,31.401233;120.847132,31.386437;120.829885,31.385451;120.835634,31.380518;120.842533,31.381505;120.848282,31.373613;120.852881,31.373613;120.857481,31.367693;120.86093,31.342036;120.865529,31.328218;120.874728,31.307487;120.903474,31.335128;120.937969,31.346971;120.948317,31.327231;120.966715,31.330192;120.973614,31.356839;120.975913,31.410109;120.982812,31.426873;120.981662,31.436733;120.980513,31.452506;120.987412,31.462363;120.951767,31.467292;120.935669,31.475176;120.912673,31.487001;120.910373,31.462363")
areas.push("121.074224,31.428722;121.062151,31.427243;121.042603,31.420834;121.018457,31.416889;120.977638,31.409986;120.982812,31.427736;120.980513,31.454355;120.986262,31.463719;120.951767,31.470125;120.924746,31.491805;120.984537,31.501165;120.99661,31.504614;120.999485,31.50215;121.005809,31.504614;121.013283,31.497717;121.021906,31.499687;121.021906,31.493776;121.031105,31.485893;121.024206,31.485893;121.024781,31.479487;121.017307,31.468647;121.017307,31.464704;121.023056,31.463226;121.03398,31.45879;121.027656,31.450412;121.027656,31.444497;121.048353,31.438089;121.056401,31.432173;121.057551,31.435624;121.063875,31.438089;121.072499,31.427736")
areas.push("120.984537,31.332166;120.997185,31.330686;121.011558,31.325751;121.025931,31.32427;121.027656,31.336608;121.027656,31.348451;121.022481,31.364363;121.01472,31.377436;121.028231,31.377682;121.041454,31.378422;121.053527,31.374969;121.091759,31.364116;121.11648,31.355976;121.113605,31.364856;121.105844,31.388534;121.104694,31.395932;121.101532,31.395192;121.094921,31.397164;121.10067,31.418615;121.096071,31.42108;121.106419,31.428969;121.092621,31.443018;121.073074,31.428229;121.061288,31.426996;121.043178,31.420834;121.01587,31.41615;120.985687,31.410972;120.979075,31.410726;120.975913,31.404069;120.975626,31.385574")
areas.push("121.017307,31.379532;121.042603,31.380518;121.115043,31.355852;121.095496,31.342036;121.102395,31.325257;121.059851,31.320321;121.050652,31.312424;121.023056,31.304525;121.028805,31.316373;121.025356,31.327231;121.026506,31.356839;121.017307,31.381505;121.044903,31.381505");
areas.push("121.100095,31.328218;121.098945,31.345984;121.119642,31.355852;121.126541,31.348944;121.13689,31.348944;121.13689,31.340062;121.13574,31.326244;121.144938,31.313411;121.148388,31.309462;121.157587,31.316373;121.158736,31.307487;121.162186,31.291689;121.162186,31.286752;121.119642,31.287739;121.089746,31.293664;121.083997,31.275889;121.06675,31.275889;121.042603,31.288727;121.028805,31.303538;121.024206,31.3065;121.046053,31.313411;121.059851,31.323283;121.098945,31.328218;121.098945,31.345984;121.118492,31.356839");
areas.push("121.023056,31.308475;120.990861,31.304525;120.971314,31.294652;120.971314,31.278852;120.971314,31.259098;120.971314,31.249219;120.975913,31.234399;120.969014,31.231435;120.93222,31.231435;120.903474,31.238351;120.895425,31.254158;120.890826,31.267987;120.886226,31.284777;120.893125,31.289714;120.883927,31.298601;120.875878,31.305513;120.877028,31.312424;120.897725,31.33414;120.908073,31.340062;120.942568,31.347958;120.957516,31.329205;120.958666,31.329205;120.981662,31.338088;121.003509,31.333153;121.026506,31.325257;121.026506,31.315385;121.026506,31.3065;121.041454,31.295639;121.059851,31.281814;121.072499,31.267;121.072499,31.241315");
areas.push("120.977063,31.240327;120.972464,31.260085;120.972464,31.273913;121.002359,31.304525;121.025356,31.304525;121.043753,31.277864;121.071349,31.244279;121.071349,31.231435;121.071349,31.216612;120.99661,31.214636;120.987412,31.230447;120.975913,31.238351;120.973614,31.255146");
areas.push("120.973614,31.241315;120.99661,31.222542;121.016157,31.221553;121.078248,31.221553;121.079398,31.197834;121.079398,31.183994;121.077098,31.16422;121.061001,31.159276;121.048353,31.168175;121.049502,31.154332;121.049502,31.150376;121.049502,31.150376;121.023056,31.138261;120.963265,31.141228;120.979938,31.163479;120.987412,31.18177;120.992586,31.186219;120.987986,31.19561;120.978788,31.19561;120.973614,31.197092;120.954641,31.208953;120.951767,31.220318;120.952917,31.223283;120.963265,31.223777;120.974763,31.234646");
areas.push("120.850582,31.210683;120.86438,31.192891;120.881627,31.170153;120.887376,31.144442;120.879327,31.130595;120.879327,31.121692;120.871279,31.11081;120.842533,31.12466;120.829885,31.129606;120.818386,31.160265;120.822986,31.160265;120.828735,31.174108;120.811487,31.185971;120.824136,31.197834;120.841383,31.204753;120.867829,31.217601");
areas.push("120.887313,31.145752;120.91031,31.145752;120.926407,31.145752;120.935606,31.151686;120.963202,31.146741;120.971251,31.160586;120.97585,31.169485;120.991948,31.189258;120.991948,31.196177;120.971251,31.201119;120.952853,31.22385;120.970101,31.227803;120.9724,31.23472;120.949404,31.23472;120.921808,31.23472;120.90456,31.238672;120.90456,31.219898;120.878114,31.216933;120.864316,31.216933;120.863167,31.216933;");
colors = ["#fff492", "#fff492", "#98d057", "#e19ee6", "#1ad3da", "#ffc11d", "#98e800", "#b95817", "#03a9f4", "#39d0a4", "#8bbb53","#fff492"];
var pointArray = [];
for (var i = 0; i < areas.length; i++) {
var ply = new BMap.Polygon(areas[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
if (i !== 0) {
ply.setFillColor(colors[i]) //设置多边形的填充颜色
}
ply.setFillOpacity(0.35);
polygons.push(ply); //加入多边形数组，以之后获取多边形边界点集
// if (i == 7)
// {
// ply.enableEditing(); //范围可编辑 【编辑的时候开启】
// }
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
addlabel();
}
setTimeout(function () {
getBoundary();
}, 2000);
function addlabel() {
var pointArray = [
new BMap.Point(120.868916,31.48535), //巴城镇
new BMap.Point(120.934456,31.398594), //玉山镇
new BMap.Point(120.996547,31.479438), //周市镇
new BMap.Point(121.055188,31.405498), //昆山技术经济开发区
new BMap.Point(121.057488,31.350251), //陆家镇
new BMap.Point(121.11268,31.316693), // 花桥镇
new BMap.Point(120.931007,31.302871), //张浦镇
new BMap.Point(121.014944,31.260406), //千灯镇
new BMap.Point(120.916059,31.197166), //锦溪镇
new BMap.Point(121.012645,31.184315), //淀山湖镇
new BMap.Point(120.848219,31.159597) // 周庄镇
];
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); //【将点集输出到控制台】
}
}
</script>
</body>
</html>
THE END
