百度地图给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 相关文章推荐
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解利用eventemitter2实现Vue组件通信
Nov 04 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
AngularJS快速入门
2015/04/02 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
python字典操作实例详解
2017/11/16 Python
Python 函数返回值的示例代码
2019/03/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
django的ORM操作 增加和查询
2019/07/26 Python
python中常见错误及解决方法
2020/06/21 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
毕业生找工作推荐信
2013/11/21 职场文书
大学生怎样进行自我评价
2013/12/07 职场文书
小班秋游活动方案
2014/02/22 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android