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 判断 object 的特定类转载
Feb 01 Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue实现购物车功能
Apr 27 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
vue项目接口域名动态获取操作
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
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
js汉字转拼音实现代码
2013/02/06 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
给我一面国旗 python帮你实现
2019/09/30 Python
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
黄金酒广告词
2014/03/21 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
项目建议书范文
2014/05/12 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
杭白菊导游词
2015/02/10 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
治庸问责工作总结
2015/08/11 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Vue全家桶入门基础教程
2021/05/14 Vue.js
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python