『实践』百度地图给多个marker添加右键菜单（删除、更新）

来源：互联网发布：干网络咨询压力好大编辑：程序博客网时间：2024/05/14 05:00

js：

 1 $.getJSON("./GetStationPlaceServlet",function(json){   2         for(var i=0;i<json.length;i++){ 3             var obj1 = eval(json); 4             //获取经纬度 5             fStationlon = parseFloat(obj1[i].Stationlon); 6             fStationlat = parseFloat(obj1[i].Stationlat);     7             var pt = new BMap.Point(fStationlon,fStationlat); 8             var myIcon = new BMap.Icon("photo/station.png",new BMap.Size(50,50),{ anchor: new BMap.Size(10, 10) }); 9               var marker = new BMap.Marker(pt,{icon:myIcon}); // 创建标注10               map.addOverlay(marker);          //将标注添加到地图中11             var strRes = parseFloat(obj1[i].StationId);12             addClickHandler(strRes,marker);//左键单击marker事件13             RightClickHandler(strRes,marker);//右键单击marker出现右键菜单事件14             RightClick();//右键地图出现右键菜单事件15         }16     });17 //右键单击marker出现右键菜单事件18 function RightClickHandler(stationId,marker){19     var removeMarker = function(e,ee,marker){//右键删除站点20             var json={21                     "StationId":stationId,22             };23             if (confirm("要删除站点"+stationId+"吗？")){24                 if(true){25                     $.getJSON("./DeleteStationServlet",{json:JSON.stringify(json)},function(json){26                         if(json.result==true){27                             alert("删除站点"+stationId+"成功！");28                             map.removeOverlay(marker);               //将地图中的标记删除29                         }        30                     });31                 }32             }    33     };34     var updateMarker = function(marker){//右键更新站名35         if (confirm("要修改站点"+stationId+"的站名吗？")){36             if(true){37                 $(".AllUpdateMassage").show();38                 $("#stationId").val(stationId);39             }40         }    41     };42     var markerMenu=new BMap.ContextMenu();43     markerMenu.addItem(new BMap.MenuItem('删除站点',removeMarker.bind(marker)));44     markerMenu.addItem(new BMap.MenuItem('修改站名',updateMarker.bind(marker)));45     marker.addContextMenu(markerMenu);//给标记添加右键菜单46 }47 //鼠标左键单击marker事件48 function addClickHandler(stationId,marker){49     marker.addEventListener("click",function(e){                    50         var p = marker.getPosition();                                             //获取marker的位置51         var staId={52                 "StationId":stationId,53         };54         $.getJSON("./GetStationInfoServlet",{json:JSON.stringify(staId)},function(json){55 56             for(var i=0;i<json.length;i++){57                 var obj1 = eval(json);58 59                 stationName = obj1[i].stationName;60 61                 var content = "站点编号："+stationId+"<br/>"+ "站点名称："+stationName;62                 openInfo(content,e);63             }64         });65     });66 }67 //左键单击marker弹出窗口事件68 function openInfo(content,e){69     var p = e.target;70     var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);71     var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 72     map.openInfoWindow(infoWindow,point);                  //开启信息窗口73 }74 //修改站点站名75 function update(){76     var stationId=$("#stationId").val();//编号77     var stationName=$(".AllUpdateMassage_name").val();//名字78     79     var json={80             "StationId":stationId,81             "StationName":stationName82     };    83     84     $.getJSON("./UpdateStationServlet",{json:JSON.stringify(json)},function(json){85         86         if(json.result==true){87             alert("站点"+stationId+"站名修改成功！");88             $(".AllUpdateMassage").hide();89         }        90         else{91             alert("失败！");92         }93     });94     95 }

效果图：

地图上和数据库中都已删除此点信息：

我在实现这个时，发现有人只能在一个marker上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的，我也是新手不是很清楚，望懂得人不惜指教。

阅读全文

1 0