百度地图给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 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
全面了解python字符串和字典
2016/07/07 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
详解Python with/as使用说明
2018/12/13 Python
python树莓派红外反射传感器
2019/01/21 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
大学生作弊检讨书
2014/02/19 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
2014年减负工作总结
2014/12/10 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python