百度地图给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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
js实现弹窗猜数字游戏
Nov 26 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/04/23 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
浅析javascript 定时器
2014/12/23 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
基于vue、react实现倒计时效果
2019/08/26 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
深入理解Python对Json的解析
2017/02/14 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
keras得到每层的系数方式
2020/06/15 Python
基于Python正确读取资源文件
2020/09/14 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
恶意软件的定义
2014/11/12 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
什么是servlet
2012/05/08 面试题
财务会计实习报告体会
2013/12/20 职场文书
中英文求职信范文
2014/01/27 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
司机工作自我鉴定
2014/09/19 职场文书
入学证明
2015/06/23 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python