百度地图给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 相关文章推荐
Dom 是什么的详细说明
Oct 25 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
vue组件name的作用小结
May 23 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue完美实现el-table列宽自适应
May 08 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
PHP7 错误处理机制修改
2021/03/09 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python pandas常用函数详解
2018/02/07 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python中id函数运行方式
2020/07/03 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
清洁工岗位职责
2014/01/29 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
倡议书格式范文
2014/04/14 职场文书
2015年环卫工作总结
2015/04/28 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
cypress测试本地web应用
2022/06/01 Javascript