JS代码实现百度地图 画圆 删除标注


Posted in Javascript onOctober 12, 2016

把下面这段代码复制到百度地图的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="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>圆形区域搜索</title>
</head>
<body>
<div id="allmap"></div>
<p>返回北京市地图上圆形覆盖范围内的“餐馆”检索结果,并展示在地图上</p>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var mPoint = new BMap.Point(116.404, 39.915); 
map.enableScrollWheelZoom();
map.centerAndZoom(mPoint,15);
var circle = new BMap.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3,enableEditing:true});
map.addOverlay(circle);
var removecircle = function(e,ee,marker){
//取得地图上所有的覆盖物
var overlays = map.getOverlays();
//取得圆形区域
var bounds = marker.getBounds();
var maker_arr = [];
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]);
}
} 
}
var r=confirm("你确定要删除区域中"+(maker_arr.length-1)+"个标注吗?");
if (r==true){
for(var i=0;i<maker_arr.length;i++){
map.removeOverlay(maker_arr[i]);
}
map.removeOverlay(marker);
}else{
map.removeOverlay(marker);
}
}
//创建右键菜单
var circleMenu=new BMap.ContextMenu();
circleMenu.addItem(new BMap.MenuItem('删除',removecircle.bind(removecircle))); 
circle.addContextMenu(circleMenu);
var local = new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}}); 
//local.searchNearby('餐馆',mPoint,1000);
function addMarker(point){
var marker = new BMap.Marker(point);
map.addOverlay(marker);
}
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
for (var i = 0; i < 5; i ++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
addMarker(point);
}
</script>

功能:以某个区域批量删除maker。

功能的设计思路:

1 右键菜单--》区域删除机构。

JS代码实现百度地图 画圆 删除标注

2 先画圆(以鼠标点击的某个点为中心点 画圆)。

JS代码实现百度地图 画圆 删除标注

3 得到圆中所选中的标注(主键)。

JS代码实现百度地图 画圆 删除标注

4 圆上右键删除

JS代码实现百度地图 画圆 删除标注

4 .1 确定 删除圆,删除标注(连接数据库数据)。

JS代码实现百度地图 画圆 删除标注

4.2 取消 删除圆。

JS代码实现百度地图 画圆 删除标注

主要功能代码(js);

http://developer.baidu.com/map/reference/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/Circle

{ 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('确认','你确定要删除区域中选中的标注吗?',function(r){
if (r==true){
map.removeOverlay(circle)// 删除圆
for(var i=0;i<maker_id.length;i++){ 
$.ajax({ 
type: 'delete',
url: '/yxt-admin/admin/hospital/' + maker_id[i] + '/delete',
success: function(data) {
if (data.stateCode == 200) { 
$.messager.show({
title: '提示消息',
msg: data.message,
timeout: 5000,
showType: 'slide'
});
}else if(data.stateCode==205){
$.messager.alert('提醒','登录已超时 重新登录','info',function(){
top.location.href="/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代码实现百度地图 画圆 删除标注,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 #Javascript
微信js-sdk界面操作接口用法示例
Oct 12 #Javascript
微信小程序 location API接口详解及实例代码
Oct 12 #Javascript
webpack+vue.js实现组件化详解
Oct 12 #Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 #Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 #Javascript
JS禁止查看网页源代码的实现方法
Oct 12 #Javascript
You might like
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue中全局变量的定义和使用
2019/06/05 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Django如何将URL映射到视图
2019/07/29 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
python属于解释型语言么
2020/06/15 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
什么是抽象
2015/12/13 面试题
保送生自荐信范文
2013/10/06 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
保护母亲河倡议书
2014/04/14 职场文书
相亲活动方案
2014/08/26 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书