百度地图给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 22 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
JavaScript实现简单验证码
Aug 24 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脚本数据库功能详解(下)
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
javascript异步处理工作机制详解
2015/04/13 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
实例详解Python装饰器与闭包
2019/07/29 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python流程控制 if else实现解析
2019/09/02 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
利用python生成照片墙的示例代码
2020/04/09 Python
如何将整数int转换成字串String
2014/03/21 面试题
软件测试面试题
2014/01/05 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
安全检查管理制度
2014/02/02 职场文书
员工离职通知函
2015/04/25 职场文书
入党转正申请报告
2015/05/15 职场文书
四则混合运算教学反思
2016/02/23 职场文书
学校就业保障协议书
2019/06/24 职场文书
导游词之无锡梅园
2019/11/28 职场文书