您的位置:首页 > 其它

百度地图给多个marker添加右键菜单(删除、更新)

2016-03-04 00:00 686 查看
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":stationName 82  }; 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上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: