// 初始化地图
|
var map = new BMap.Map('container');
|
var point = new BMap.Point(114.329123,29.847218);
|
map.centerAndZoom(point, 10);
|
map.enableScrollWheelZoom();
|
|
// 全局变量
|
var coordinate = '';
|
var overlays = [];
|
var objs = {
|
"polyline": [],
|
"polygon": [],
|
"rectangle": [],
|
"circle": []
|
};
|
var editors = [];
|
|
// 初始化绘图工具
|
var drawingManager = new BMapLib.DrawingManager(map, {
|
isOpen: false,
|
enableDrawingTool: true,
|
drawingToolOptions: {
|
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
offset: new BMap.Size(5, 5),
|
drawingModes: [
|
'polygon', // 修改这里
|
'circle' // 修改这里
|
]
|
},
|
polygonOptions: {
|
strokeColor: "#80d8ff",
|
fillColor: "#00b0ff",
|
strokeWeight: 2,
|
strokeOpacity: 0.8
|
},
|
circleOptions: {
|
strokeColor: "#80d8ff",
|
fillColor: "#00b0ff",
|
strokeWeight: 2,
|
strokeOpacity: 0.8
|
}
|
});
|
|
// 添加提示信息
|
function showDrawingTips() {
|
var tips = document.createElement('div');
|
tips.className = 'drawing-tips';
|
tips.style.cssText = 'position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 4px; z-index: 1000;';
|
tips.innerHTML = '提示：双击左键结束绘制';
|
document.getElementById('container').appendChild(tips);
|
|
// 3秒后自动消失
|
setTimeout(function() {
|
tips.style.display = 'none';
|
}, 3000);
|
}
|
|
// 监听绘制完成事件
|
drawingManager.addEventListener('overlaycomplete', function(e) {
|
console.log("绘制完成事件触发，类型:", e.type);
|
var overlay = e.overlay;
|
overlays.push(overlay);
|
|
try {
|
// 修改判断条件，使用字符串比较
|
if (e.type === 'polygon') {
|
var path = overlay.getPath();
|
console.log("多边形路径点:", path);
|
|
if (path && path.length > 0) {
|
var str = '';
|
for (var i = 0; i < path.length; i++) {
|
str += path[i].lat + ',' + path[i].lng + ';';
|
}
|
coordinate = str.substring(0, str.length - 1);
|
objs.polygon.push(overlay);
|
console.log("多边形绘制完成，当前坐标:", coordinate);
|
} else {
|
console.error("多边形路径点为空");
|
}
|
} else if (e.type === 'circle') {
|
var center = overlay.getCenter();
|
var radius = overlay.getRadius();
|
console.log("圆形中心点:", center, "半径:", radius);
|
|
if (center && radius) {
|
if (radius > 5000) {
|
Feng.error("创建电子围栏失败，圆半径不能大于5000米");
|
map.removeOverlay(overlay);
|
return;
|
}
|
coordinate = center.lat + ',' + center.lng + ';' + radius;
|
objs.circle.push(overlay);
|
console.log("圆形绘制完成，当前坐标:", coordinate);
|
} else {
|
console.error("圆形参数不完整");
|
}
|
}
|
} catch (error) {
|
console.error("处理绘制完成事件时出错:", error);
|
}
|
});
|
|
// 绘制功能
|
function draw(type) {
|
console.log("开始绘制，类型:", type);
|
// 清除之前的坐标
|
coordinate = '';
|
|
try {
|
switch (type) {
|
case 'polygon': {
|
drawingManager.setDrawingMode('polygon'); // 修改这里
|
drawingManager.open();
|
showDrawingTips();
|
break;
|
}
|
case 'circle': {
|
drawingManager.setDrawingMode('circle'); // 修改这里
|
drawingManager.open();
|
break;
|
}
|
}
|
} catch (error) {
|
console.error("设置绘制模式时出错:", error);
|
}
|
}
|
|
|
// 添加一个直接获取坐标的函数
|
function getOverlayCoordinate(overlay) {
|
try {
|
if (overlay instanceof BMap.Polygon) {
|
var path = overlay.getPath();
|
if (path && path.length > 0) {
|
var str = '';
|
for (var i = 0; i < path.length; i++) {
|
str += path[i].lat + ',' + path[i].lng + ';';
|
}
|
return str.substring(0, str.length - 1);
|
}
|
} else if (overlay instanceof BMap.Circle) {
|
var center = overlay.getCenter();
|
var radius = overlay.getRadius();
|
if (center && radius) {
|
return center.lat + ',' + center.lng + ';' + radius;
|
}
|
}
|
} catch (error) {
|
console.error("获取坐标时出错:", error);
|
}
|
return '';
|
}
|
|
// 清除按钮事件
|
document.getElementById('clear').onclick = function() {
|
map.clearOverlays();
|
overlays = [];
|
coordinate = '';
|
objs.circle = [];
|
objs.rectangle = [];
|
objs.polygon = [];
|
objs.polyline = [];
|
closeEdit();
|
console.log("清除后的坐标:", coordinate);
|
}
|
|
// 关闭绘图按钮事件
|
document.getElementById('close').onclick = function() {
|
drawingManager.close();
|
for (var i = 0; i < radios.length; i++) {
|
radios[i].checked = false;
|
}
|
closeEdit();
|
console.log("关闭后的坐标:", coordinate);
|
}
|
|
// 编辑所有覆盖物
|
function editAll() {
|
editors = [];
|
|
// 多边形编辑
|
for (var i in objs.polygon) {
|
var polygon = objs.polygon[i];
|
var polygonEditor = new BMapLib.PolygonEditor(map, polygon);
|
polygonEditor.addEventListener('drawend', function(e) {
|
var path = e.overlay.getPath();
|
var str = '';
|
for (var i = 0; i < path.length; i++) {
|
str += path[i].lat + ',' + path[i].lng + ';';
|
}
|
coordinate = str.substring(0, str.length - 1);
|
console.log("编辑后的坐标:", coordinate);
|
});
|
editors.push(polygonEditor);
|
polygonEditor.open();
|
}
|
|
// 圆形编辑
|
for (var i in objs.circle) {
|
var circle = objs.circle[i];
|
var circleEditor = new BMapLib.CircleEditor(map, circle);
|
circleEditor.addEventListener('drawend', function(e) {
|
var center = e.overlay.getCenter();
|
var radius = e.overlay.getRadius();
|
if (radius > 5000) {
|
Feng.error("创建电子围栏失败，圆半径不能大于5000米");
|
return;
|
}
|
coordinate = center.lat + ',' + center.lng + ';' + radius;
|
console.log("编辑后的坐标:", coordinate);
|
});
|
editors.push(circleEditor);
|
circleEditor.open();
|
}
|
}
|
|
// 关闭编辑
|
function closeEdit() {
|
for (var i = 0; i < editors.length; i++) {
|
editors[i].close();
|
}
|
editors = [];
|
}
|
|
// 添加提交函数
|
function submitCoordinate() {
|
console.log("提交时的坐标:", coordinate);
|
if (!coordinate || coordinate.trim() === '') {
|
Feng.error('请在地图上规划区域');
|
return false;
|
}
|
return coordinate;
|
}
|
|
// 测试函数
|
// 修改测试函数
|
function testCoordinate() {
|
console.log("当前坐标值:", coordinate);
|
console.log("当前覆盖物数量:", overlays.length);
|
console.log("多边形数量:", objs.polygon.length);
|
console.log("圆形数量:", objs.circle.length);
|
|
// 尝试从最后一个覆盖物获取坐标
|
if (overlays.length > 0) {
|
var lastOverlay = overlays[overlays.length - 1];
|
var newCoordinate = getOverlayCoordinate(lastOverlay);
|
console.log("从最后一个覆盖物获取的坐标:", newCoordinate);
|
if (newCoordinate) {
|
coordinate = newCoordinate;
|
}
|
}
|
}
|
|
// 绑定单选按钮事件
|
var radios = document.getElementsByName('func');
|
for (var i = 0; i < radios.length; i++) {
|
radios[i].onchange = function(e) {
|
draw(e.target.value);
|
}
|
}
|
|
// 在绘制完成后自动测试
|
drawingManager.addEventListener('overlaycomplete', function(e) {
|
setTimeout(testCoordinate, 10); // 延迟1秒后测试
|
});
|
|
// 页面加载完成后初始化
|
$(document).ready(function() {
|
// 初始化地图
|
initMap();
|
|
// 监听市区选择变化
|
$("#areaCode").change(function() {
|
console.log("市区选择变化，重新获取地图数据");
|
getMapData();
|
});
|
});
|
|
// 初始化地图
|
function initMap() {
|
// 设置地图中心点和缩放级别
|
var point = new BMap.Point(114.329123,29.847218);
|
map.centerAndZoom(point, 15);
|
map.enableScrollWheelZoom();
|
}
|
