百度地图给map添加右键菜单(判断是否为marker)


Posted in Javascript onMarch 04, 2016

废话不多说了,直接给大家贴代码了。

js:

var s;//经度
var w;//纬度
map.addEventListener("rightclick",function(e){
if(e.overlay){//判断右键单击的是否是marker
}else{
s = e.point.lng;//经度
w = e.point.lat;//维度
RightClick();//右键单击map出现右键菜单事件
}
});
//右键单击map出现右键菜单事件
function RightClick(){
//alert('你点击的是地图');
var createMarker = function(map){//右键更新站名
if (confirm("要新建站点吗?")){
if(true){
$(".AllSetMassage").show();
}
} 
};
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('新建站点',createMarker.bind(map)));
map.addContextMenu(markerMenu);//给标记添加右键菜单
}

效果:

右键单击map(非marker)

百度地图给map添加右键菜单(判断是否为marker)

右键单击marker:

百度地图给map添加右键菜单(判断是否为marker)

PS:百度地图给多个marker添加右键菜单(删除、更新)

js:

$.getJSON("./GetStationPlaceServlet",function(json){ 
for(var i=;i<json.length;i++){
var obj = eval(json);
//获取经纬度
fStationlon = parseFloat(obj[i].Stationlon);
fStationlat = parseFloat(obj[i].Stationlat); 
var pt = new BMap.Point(fStationlon,fStationlat);
var myIcon = new BMap.Icon("photo/station.png",new BMap.Size(,),{ anchor: new BMap.Size(, ) });
var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker); //将标注添加到地图中
var strRes = parseFloat(obj[i].StationId);
addClickHandler(strRes,marker);//左键单击marker事件
RightClickHandler(strRes,marker);//右键单击marker出现右键菜单事件
RightClick();//右键地图出现右键菜单事件
}
});
//右键单击marker出现右键菜单事件
function RightClickHandler(stationId,marker){
var removeMarker = function(e,ee,marker){//右键删除站点
var json={
"StationId":stationId,
};
if (confirm("要删除站点"+stationId+"吗?")){
if(true){
$.getJSON("./DeleteStationServlet",{json:JSON.stringify(json)},function(json){
if(json.result==true){
alert("删除站点"+stationId+"成功!");
map.removeOverlay(marker); //将地图中的标记删除
} 
});
}
} 
};
var updateMarker = function(marker){//右键更新站名
if (confirm("要修改站点"+stationId+"的站名吗?")){
if(true){
$(".AllUpdateMassage").show();
$("#stationId").val(stationId);
}
} 
};
var markerMenu=new BMap.ContextMenu();
markerMenu.addItem(new BMap.MenuItem('删除站点',removeMarker.bind(marker)));
markerMenu.addItem(new BMap.MenuItem('修改站名',updateMarker.bind(marker)));
marker.addContextMenu(markerMenu);//给标记添加右键菜单
}
//鼠标左键单击marker事件
function addClickHandler(stationId,marker){
marker.addEventListener("click",function(e){ 
var p = marker.getPosition(); //获取marker的位置
var staId={
"StationId":stationId,
};
$.getJSON("./GetStationInfoServlet",{json:JSON.stringify(staId)},function(json){
for(var i=;i<json.length;i++){
var obj = eval(json);
stationName = obj[i].stationName;
var content = "站点编号:"+stationId+"<br/>"+ "站点名称:"+stationName;
openInfo(content,e);
}
});
});
}
//左键单击marker弹出窗口事件
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
//修改站点站名
function update(){
var stationId=$("#stationId").val();//编号
var stationName=$(".AllUpdateMassage_name").val();//名字
var json={
"StationId":stationId,
"StationName":stationName
}; 
$.getJSON("./UpdateStationServlet",{json:JSON.stringify(json)},function(json){
if(json.result==true){
alert("站点"+stationId+"站名修改成功!");
$(".AllUpdateMassage").hide();
} 
else{
alert("失败!");
}
});
}

效果图:

百度地图给map添加右键菜单(判断是否为marker)

百度地图给map添加右键菜单(判断是否为marker)

百度地图给map添加右键菜单(判断是否为marker)

地图上和数据库中都已删除此点信息:

百度地图给map添加右键菜单(判断是否为marker)

我在实现这个时,发现有人只能在一个marker上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。

百度地图给map添加右键菜单(判断是否为marker)百度地图给map添加右键菜单(判断是否为marker)

Javascript 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
javascript实现回到顶部特效
May 06 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 #Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 #Javascript
jquery实现页面常用的返回顶部效果
Mar 04 #Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 #Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 #Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
2020最新CPU的性能排名
2020/04/02 数码科技
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
nodeJS微信分享
2017/12/20 NodeJs
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python的Django框架中的Context使用
2015/07/15 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
知识改变命运演讲稿
2014/05/21 职场文书
体育教师求职信
2014/05/24 职场文书
大班亲子运动会方案
2014/06/10 职场文书
应急处置方案
2014/06/16 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
电频谱管理的原则是什么
2022/02/18 无线电