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 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vue的路由映射问题及解决方案
Oct 14 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
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
PyQt5每天必学之组合框
2018/04/20 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python super用法及原理详解
2020/01/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
中药学自荐信
2014/06/15 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
心理学培训心得体会
2016/01/22 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书