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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
基于php split()函数的用法详解
2013/06/05 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
PHP正则验证Email的方法
2015/06/15 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
Js基础学习资料
2010/11/23 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解Vue项目中实现锚点定位
2019/04/24 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
vue前后分离调起微信支付
2019/07/29 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python常用数据分析模块原理解析
2020/07/20 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
大学生军训自我评价分享
2013/11/09 职场文书
小学防溺水制度
2014/01/29 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
班训口号大全
2014/06/18 职场文书
护士工作失误检讨书
2014/09/14 职场文书
导游词之镇江焦山
2019/11/21 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Redis可视化客户端小结
2021/06/10 Redis
详解Go语言中Get/Post请求测试
2022/06/01 Golang
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL