百度地图给map添加右键菜单(判断是否为marker)
更新时间:2016年3月7日 10:01 点击:2713
废话不多说了,直接给大家贴代码了。
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)
右键单击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("失败!"); } }); }
效果图:
地图上和数据库中都已删除此点信息:
我在实现这个时,发现有人只能在一个marker上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。
相关文章
- 采用CSS覆盖的方法就可以了,但是官方是不允许这么做的...2013-10-13
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- 这篇文章主要介绍了百度地图API之百度地图退拽标记点获取经纬度的实现代码,需要的朋友可以参考下...2017-01-16
- 相信大家现在都知道微信小程序吧,下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料,分享出来供大家参考学习,文中通过示例代码介绍的非常详细,需要的朋友们下面跟着小编来一起学习学习吧。...2017-06-15
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
以下是使用js代码实现百度地图计算两地距离,代码如下所示:<script src="js/jquery-1.9.0.js" type="text/javascript" language="javascript"></script><script language="javascript" type="text/javascript" src="js/...2015-10-30- 这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下...2016-03-07
- 这篇文章主要介绍了C++中的哈希容器unordered_map使用示例,本文直接给出实例代码,并讲解了一些hash table的知识,需要的朋友可以参考下...2020-04-25
- 最近做个项目,需要实现获取当前位置的经纬度,所以本文主要介绍了vue中调用百度地图获取经纬度的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-16
- 这篇文章主要介绍了php+js实现百度地图多点标注的方法,涉及php结合js针对百度地图接口调用与json操作相关技巧,需要的朋友可以参考下...2016-12-02
- 下面小编就为大家带来一篇JS中的forEach、$.each、map方法推荐。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-04-06
- 这篇文章主要介绍了使用C#调用百度地图并实现坐标点的设置以及读取示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-03
- 作开发的朋友都知道百度地址或其它的google地址及火星,高德地图它们的坐标值都是不一样的,如果我们希望从高德地图转换到百度地址是需要转换坐标的否则就不准了,下面来看...2016-11-25
- 这篇文章主要介绍了详解用Python调用百度地图正/逆地理编码API,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-02
- 用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下...2020-06-30
- 在网站开发过程中,经常会调用到地图,百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用,本文就详细的介绍一下,感兴趣的可以了解一下...2021-07-06
- 本文章简单的介绍了一下关于百度地图的应用,这里我介绍一个功能就是在自己定的层上给加个事件方法,有需要的参考一下。 给marker、lable、circle等Overlay添加事件...2016-11-25
- 这篇文章主要介绍了C#开发Android百度地图手机应用程序(多地图展示)的相关资料,需要的朋友可以参考下...2020-06-25
- 应用百度地图时,我们如何用php计算两个GPS经纬度坐标之间的距离呢?现在我们把函数代码分享给你。 以下是我分享的用PHP计算两个GPS经纬度坐标之间的距离的代码,有需...2016-11-25