百度地图给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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
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下使用以下代码连接并测试
2008/04/09 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
js实现下一页页码效果
2017/03/07 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python PyQt5整理介绍
2020/04/01 Python
Python是怎样处理json模块的
2020/07/16 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
授权委托书(法人单位用)
2014/09/29 职场文书
学校国庆节活动总结
2015/03/23 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技