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


Posted in Javascript onMarch 04, 2016

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

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)

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

右键单击marker:

百度地图给map添加右键菜单(判断是否为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("失败!");
}
});
}

效果图:

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

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

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

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

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

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

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

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
vue中appear的用法
Aug 17 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 #Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 #Javascript
jquery实现页面常用的返回顶部效果
Mar 04 #Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 #Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 #Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
python二叉树的实现实例
2013/11/21 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
深入了解Python在HDA中的应用
2019/09/05 Python
python tkinter基本属性详解
2019/09/16 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
货车司机岗位职责
2014/03/18 职场文书
《去年的树》教学反思
2014/04/11 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
学习作风建设心得体会
2014/10/22 职场文书
三十年同学聚会感言
2015/07/30 职场文书