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


    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上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。

             

  • 相关阅读:
    iOS开发UI篇—字典转模型
    使用python编写批量卸载android应用的脚本
    CircularProgressBar
    Custom-Progress-Dialog-Android
    picasso jar
    swift
    Python编程
    H264分析工具
    Android Websites
    AnATools
  • 原文地址:https://www.cnblogs.com/landiljy/p/5238931.html
Copyright © 2020-2023  润新知