JS代码实现百度地图 画圆 删除标注
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
把下面这段代码复制到百度地图的demo中运行，效果就是我想设计的效果。
<!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%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="/UploadFiles/2021-04-02/api">
功能：以某个区域批量删除maker。
功能的设计思路：
1 右键菜单--》区域删除机构。
2 先画圆(以鼠标点击的某个点为中心点 画圆)。
3 得到圆中所选中的标注(主键)。
4 圆上右键删除
4 .1 确定 删除圆，删除标注(连接数据库数据)。
4.2 取消 删除圆。
主要功能代码(js);
http://developer.baidu.com/map/reference/index.php"htmlcode">
{ text:'区域删除机构',
callback:function(e){
var mPoint=new BMap.Point(e.lng,e.lat);// 得到中心点坐标
// 一句js画圆 但是这个不可以重复画圆 需要刷新页面后才可以重新画圆
/* var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});
map.addOverlay(circle); */
var circle = new BMap.Circle(mPoint,5000);
circle.setFillColor("blue"); //填充颜色
circle.setStrokeWeight(1);// 设置圆形边线的宽度，取值为大于等于1的整数。
circle.setFillOpacity(0.3);// 返回圆形的填充透明度。
circle.setStrokeOpacity(0.3);// 设置圆形的边线透明度，取值范围0 - 1。
// 这样画圆 可编辑的圆 这两句js代码的位置不可改变
map.addOverlay(circle);// 把圆添加到地图中
circle.enableEditing();// 设置可编辑的圆
var removecircle = function(e,ee,marker){
var deleteid=[];
var idd=[];
//取得地图上所有的覆盖物
var overlays = map.getOverlays();
//取得圆形区域
var bounds = marker.getBounds();
var maker_arr = [];
var maker_id =[];
for(var i=0;i<overlays.length;i++){
//判断 覆盖物为标注的并且是在圆形区域内部的
if(overlays[i].uQ == "Marker"){
//获取标注点到圆心的距离 与半径做对比
if(map.getDistance(marker.getCenter(),overlays[i].getPosition()) < marker.getRadius()){
maker_arr.push(overlays[i]);
maker_id.push(overlays[i].id);// 标注主键值
}
}
}
$.messager.confirm('确认','你确定要删除区域中选中的标注吗"/yxt-admin/adminLogin.html";
});
} else {
$.messager.show({
title: '提示',
msg: data.message
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.messager.show({
title: '提示',
msg: '系统错误，请联系开发人员.或刷新当前页面，重新操作。'
});
}
});
}
location.reload();
}else{
map.removeOverlay(circle)
}
})
}
var circleMenu=new BMap.ContextMenu();
circleMenu.addItem(new BMap.MenuItem('删除',removecircle.bind(removecircle))); // 圆上右键删除
circle.addContextMenu(circleMenu);// 添加右键菜单
}
},
以上所述是小编给大家介绍的JS代码实现百度地图 画圆 删除标注，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
下一篇：如何使用jquery实现文字上下滚动效果