百度地图给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 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 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之PHP语法学习笔记1
2006/12/17 PHP
解析php获取字符串的编码格式的方法(函数)
2013/06/21 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python计算N天之后日期的方法
2015/03/31 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python引用计数操作示例
2018/08/23 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
类的返射机制中的包及核心类
2016/09/12 面试题
给实习单位的感谢信
2014/02/01 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
干部考核评语
2014/04/29 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
导游词300字
2015/02/13 职场文书
读书笔记怎么写
2015/07/01 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS