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

(0)

相关推荐

  • IOS百度地图导航开发功能实现简述

    以下通过图文并茂的方式给大家讲述百度地图导航开发功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioToolbox.framework.ImageIO.framework.CoreMotion.framework.CoreLocation.framework.CoreTelephony.framework.MediaPlayer.framework.AVFoundation.fr

  • Android百度地图poi范围搜索

    我想大家可能都有过这样的经历:兜里揣着一张银行卡,在街上到处找自动取款机(ATM).在这个场景中,ATM就是的兴趣点,我们想做的事情就是找到离自己较近的一些ATM然后取款,此时我们并不关心附近有哪些超市.酒吧,因为这些地方没办法取钱! 说了这么多,一方面是加深大家对POI这个词的认识,另一方面也是为了让大家明白我们接下来要做的事情.理论性的东西就不再多讲了,直接来看例子. 先给大家展示下效果图: 详细界面: 该示例主要介绍关键词查询.suggestion查询和查看餐饮类Place详情页功能,尤其

  • Android SDK 百度地图通过poi城市内检索简介接口的使用

    百度地图 SDK 不仅为广大开发者提供了炫酷的地图展示效果.丰富的覆盖物图层,更为广大开发者提供了多种 LBS 检索的能力.通过这些接口,开发者可以轻松的访问百度的 LBS 数据,丰富自己的移动端地图应用. 目前百度地图 SDK 为开发者提供的检索服务有: POI 检索:可以检索百度 POI 数据信息: 线路规划:利用百度的引擎帮助开发者规划线路: 在线建议检索.短链接分享.地理编码等等.... 本文将以一个很简单的 POI 城市内检索为例,像广大开发者介绍接口的使用. 第一步,选择并下载 SD

  • Android百度地图自定义公交路线导航

    一.问题描述 基于百度地图实现检索指定城市指定公交的交通路线图,效果如图所示 二.通用组件Application类,主要创建并初始化BMapManager public class App extends Application { static App mDemoApp; //百度MapAPI的管理类 public BMapManager mBMapMan = null; // 授权Key // 申请地址:http://dev.baidu.com/wiki/static/imap/key/ p

  • 基于百度地图实现产品销售的单位位置查看功能设计与实现

    1.描述 本人最近参与基于MVC5+EF6+ Bootstrap3的食品安全监管系统设计.开发.先前感觉百度地图很神秘的样子.高大上的样子,设计.开发过程遇到些问题,经查看园子高手指点.示例摸索实践,终将百度地图嵌入系统.为感谢各位朋友的帮助,今有空,将基于百度地图实现产品销售的单位位置查看功能,分享给大家.不当之处,欢迎指正. 2.产品生产批次查询 查看单位产品生产批次信息,根据产品生产批次查看,产品销售单位情况. 效果图如下: 3.产品销售地图 根据选择的产品生产批次信息,查询统计产品销售到

  • php实现计算百度地图坐标之间距离的方法

    本文实例讲述了php实现计算百度地图坐标之间距离的方法.分享给大家供大家参考,具体如下: 下面是网上的代码,使用的时候需要进行些许修改 第一个函数是获得范围,参数为纬度经度半径 第二个函数是计算坐标距离 <?php define('PI',3.1415926535898); define('EARTH_RADIUS',6378.137); //计算范围,可以做搜索用户 function GetRange($lat,$lon,$raidus){ //计算纬度 $degree = (24901 *

  • 百度地图给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 RightCli

  • C#自定义控件添加右键菜单的方法

    C#自定义控件添加右键菜单非常简单,主要用到控件,像control定义右键菜单,用items.add()叠加右键菜单内容,用click事件处理函数. 1.control是要定义右键菜单的控件. private void control_MouseDown(object sender, MouseEventArgs e) {    if (e.Button == MouseButtons.Right)    {        ContextMenu menu = new rightClickMen

  • 基于FineUI Grid控件添加右键菜单

    FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对于Grid控件来说,我这里只简单说明两种实现.即在表格的数据行上右键单击时弹出的菜单,以及在空白位置右键单击时弹出的菜单. 时间有限,废话不多说了,先看两个效果图.(实现环境 FineUI4.1.6,.NET 4.0因为需要指定控件的ID) 1. 数据行右键菜单 2. 空白处右键菜单 实现方法: 第

  • 在Flex中给datagrid添加右键菜单项的具体实现

    复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" crea

  • 为jQuery.Treeview添加右键菜单的实现代码

    先上图: jquery.treeview 数据通过JSON数据加载,有需要的朋友,可以通jquery的AJAX方法获取相关的JSON数据 json的数据格式:{"id":1,"parentid":0,"title":"标题","children":[{ ...}]} 需要两个jQuery 两件 (jquery.treeview.min.js 树插件 和 jquery.contextmenu.r2.js 右键

  • 为EasyUI的Tab标签添加右键菜单的方法

    前期的准备工作: 1.下载DEMO源码,并升级为最新版本(jquery 1.7.2,Easyui 1.2.6),直接替换就可以啦,升级easyui 是的要把css js theme 全部替换 2.在首页的HTML代码中:将 复制代码 代码如下: <div id="mm" class="easyui-menu" style="width:150px;"> <div id="mm-tabupdate">刷新

  • 使用OpenLayers3 添加地图鼠标右键菜单

    添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

  • 百度地图PC端判断用户是否在配送范围内

    最近接了个项目,其中有项目需求是这样的: 在pc端设置商家的配送范围,用户在下单时,根据用户设置的配送地点判断是否在可配送范围内,并给用户相应的提示. 下面说下我的实现思路: 1.用百度地图在PC端设置配送范围,可拖拽选择 2.根据用户设置的配送地址判断是否在配送范围内 一.百度地图PC端获取范围 改动百度地图官网的demo,设置配送范围. 思路:获取多边形的顶点,以json的形式保存到数据库. 百度API关于多边形覆盖物: 构造函数: Polygon(points:Array<Point>[

  • python实现应用程序在右键菜单中添加打开方式功能

    最近项目组开发的一个小工具想要在右键菜单中添加打开方式,以有道云笔记为例进行了需求拆解和代码编写 1.需求拆解: 如何实现手动添加右键菜单的打开方式: Step1:打开注册表编辑器,Win+R->输入 "regedit" Step2:在HKEY_CLASSES_ROOT/*/shell (或者HKEY_LOCAL_MACHINE/SOFTWARE/Classes/*/shell ,两个目录是一样的) 添加一个key:YNote,然后在该项中新建项command,然后再编辑字符串,

  • JS代码实现百度地图 画圆 删除标注

    把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc

随机推荐