时间:2021-05-18
废话不多说了,直接给大家贴代码了。
js:
效果:
右键单击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上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Marker失真问题由于公司项目原因,用了很多次百度地图API,基础的地图定位、显示地图就不多说了,这里主要说一下百度地图添加Marker图标。最开始接触百度地
Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能.第一步:重构自定义的富文本
自定义Marker,可以理解为在地图上自定义图标(CustomMarker),先看看GMap的地图和图标的显示方式:Map控件上可以添加Overlay(图层),
在做企业网站的时候,经常有客户提出要给网站中添加一个在线的地图,标注出公司的具体位置,下面征帆网络介绍下给网站中添加百度地图的方法:1、打开创建地图-百度地图A
正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离:varmap=newBMap.Map('map_canvas');map.getDist