百度地图给map添加右键菜单(判断是否为marker)

 更新时间:2016年03月04日 12:17:52   作者:屠龙灬世家  
这篇文章主要介绍了百度地图给map添加右键菜单(判断是否为marker) 的相关资料,需要的朋友可以参考下

废话不多说了,直接给大家贴代码了。

js:

var s;//经度
var w;//纬度
map.addEventListener("rightclick",function(e){
if(e.overlay){//判断右键单击的是否是marker
}else{
s = e.point.lng;//经度
w = e.point.lat;//维度
RightClick();//右键单击map出现右键菜单事件
}
});
//右键单击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:

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

相关文章

  • 不刷新网页就能链接新的js文件方法总结

    不刷新网页就能链接新的js文件方法总结

    在本篇文章里小编给大家整理的是关于不刷新网页就能链接新的js文件方法总结,需要的朋友们参考下。
    2020-03-03
  • Javascript中的window.event.keyCode使用介绍

    Javascript中的window.event.keyCode使用介绍

    我们之前发过不少关于event.keyCode相关的文章,大家都可以参考下。
    2011-04-04
  • Javascript 调用 ActionScript 的简单方法

    Javascript 调用 ActionScript 的简单方法

    在Flex中,ActionScript调用Javascript是比较简单的,说白了就是,在html里,怎么调用Javascript,在ActionScript就怎么调用就可以了。接下来通过本文给大家介绍js 调用 actionscript方法,感兴趣的朋友一起看看吧
    2016-09-09
  • 小程序ios音频播放没声音问题的解决

    小程序ios音频播放没声音问题的解决

    这篇文章主要介绍了小程序ios音频播放没声音问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • JS+DIV实现鼠标划过切换层效果的方法

    JS+DIV实现鼠标划过切换层效果的方法

    这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 关于js数组去重的问题小结

    关于js数组去重的问题小结

    在项目开发过程中经常会遇到数组中包含很多重复的内容,即脏数据去脏的操作,本文着重讲解了数组去重的几种方法。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • 超实用的JavaScript表单代码段

    超实用的JavaScript表单代码段

    这篇文章主要为大家分享了超实用的JavaScript表单代码段,帮助大家更好地学习使用javascript表单操作,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信小程序实现顶部选项卡(swiper)

    微信小程序实现顶部选项卡(swiper)

    这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 使用JS监听键盘按下事件(keydown event)

    使用JS监听键盘按下事件(keydown event)

    这篇文章主要介绍了使用JS监听键盘按下事件(keydown event),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 通过实例了解JS 连续赋值

    通过实例了解JS 连续赋值

    这篇文章主要介绍了通过实例了解JS 连续赋值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论