百度地图给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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
纯js实现动态时间显示
Sep 07 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 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
缅甸的咖啡简史
2021/03/04 咖啡文化
简单实用的PHP防注入类实例
2014/12/05 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery中DOM操作实例分析
2015/01/23 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
layui文件上传实现代码
2017/05/20 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
Pyhton中防止SQL注入的方法
2015/02/05 Python
利用Python实现图书超期提醒
2016/08/02 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python实现扫雷游戏的示例
2020/10/20 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
存储过程的优点有哪些
2012/09/27 面试题
2014全国两会大学生学习心得体会
2014/03/10 职场文书
小学总务工作总结
2015/08/13 职场文书
Python多个MP4合成视频的实现方法
2021/07/16 Python
python的变量和简单数字类型详解
2021/09/15 Python