百度地图给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 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JavaScript中的this机制
Jan 30 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 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中实现记住密码自动登录的代码
2011/03/02 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
用 Javascript 验证表单(form)中多选框(checkbox)值
2009/09/08 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python迭代器和生成器介绍
2015/03/06 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Series和DataFrame使用简单入门
2019/11/13 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
应届毕业生求职信范文
2014/07/07 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript