百度地图给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内置对象arguments详解
Mar 16 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
理解Javascript的call、apply
Dec 16 Javascript
Vue.js快速入门教程
Sep 07 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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实现过滤UBB代码的类
2015/03/12 PHP
php微信开发自定义菜单
2016/08/27 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
js中less常用的方法小结
2017/08/09 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
JS实现密码框效果
2020/09/10 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中你应该知道的一些内置函数
2017/03/31 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python学习小技巧总结
2018/06/10 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
宝信软件JAVA工程师面试经历
2012/08/19 面试题
模范家庭事迹材料
2014/02/10 职场文书
工程采购员岗位职责
2014/03/09 职场文书
励志演讲稿范文
2014/04/29 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
MySQL分库分表详情
2021/09/25 MySQL