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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue如何进行动画的封装
Sep 26 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 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
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
详解python播放音频的三种方法
2019/09/23 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
中学生自我评价范文
2014/02/08 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js