百度地图自定义边界
2019-12-02 本文已影响0人
飘_摇_
这段时间公司需要能够自定义边界，百度地图只能提供行政区以上的边界，所以先做了个demo。
image.png
所需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))
}
我说下具体步骤：
1，地图上点三个点
2，点击添加多边形，输入添加的区域名称 （1,2可以多次操作）
3，拖动边缘的小正方形来自定义边界
4，启用编辑和关闭编辑是为了更方便的看清边界（有正方形的小框看不清）
5，点击获取所有点，输入添加的单个区域名称，就能获取到单个区域所有的边界点了。
这个比较简单，所以就说了下这个demo.希望对大家有所帮助。
具体实战的效果见下图：
image.png
