百度地图给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 相关文章推荐
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
原生js实现无缝轮播图效果
Jan 28 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/11/27 PHP
php pki加密技术(openssl)详解
2013/07/01 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue element upload实现图片本地预览
2019/08/20 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Python查找相似单词的方法
2015/03/05 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
python实现IOU计算案例
2020/04/12 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
保护母亲河倡议书
2014/04/14 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
干部考察材料范文
2014/12/24 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
学习经验交流会策划书
2015/11/02 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python