废话不多说了,直接给大家贴代码了。
js:
菜单事件
}
});
//右键单击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:
获取经纬度
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站点编号:"+stationId+"
"+ "站点名称:"+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",function(json){ if(json.result==true){ alert("站点"+stationId+"站名修改成功!"); $(".AllUpdateMassage").hide(); } else{ alert("失败!"); } }); }
"+ "站点名称:"+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",function(json){ if(json.result==true){ alert("站点"+stationId+"站名修改成功!"); $(".AllUpdateMassage").hide(); } else{ alert("失败!"); } }); }
效果图:
我在实现这个时,发现有人只能在一个marker上添加右键菜单。我这个不存在这个问题。原理好像是关于闭包啥的,我也是新手不是很清楚,望懂得人不惜指教。