BigeMap地图实现右键菜单

BigeMap地图实现右键菜单

实现方式:采用js配合bigeMap的右键点击事件
场景运用vue+iview+bigeMap

1. css
/*css代码*/
	#menu{
		width: 0; /*设置为0 隐藏自定义菜单*/
		height: 125px;
		overflow: hidden; /*隐藏溢出的元素*/
		box-shadow: 0 1px 1px #888,1px 0 1px #ccc;
		position: absolute; /*自定义菜单相对与body元素进行定位*/
		z-index: 11;
	}
	.menu{
		width: 130px;
		height: 25px;
		line-height: 25px;
		padding: 0 10px;
		z-index: 11;
		background-color: white;
	}
2. div
 <div id="menu" >
	<div v-if="menuModal" >
		<div class="menu" @click="setCenterPoint">
			<a href="javascript:void (0)">设置中心点</a>
		</div>
	</div>
	<div >
	    <div class="menu" @click="delMo">
	    	<a href="javascript:void (0)" >删除</a>
	    </div>
		<div class="menu" @click="setMoPosition">
			<a href="javascript:void (0)" >坐标信息</a>
		</div>
	</div>
</div>
3. 添加事件
3.1 添加vue方法设置浏览器的右键菜单
 //右键单击map出现右键菜单事件
  rightClickMap(){
       let that = this;
       window.oncontextmenu=function(e){
			//取消默认的浏览器自带右键 很重要!!
			e.preventDefault();
			//获取我们自定义的右键菜单
			var menu=document.querySelector("#menu");
			
			//根据事件对象中鼠标点击的位置,进行定位
			let shrink=localStorage.getItem('shrink');
			if(shrink!='true'){
				menu.style.left=(e.clientX-200)+'px';
				//-200为地图中x轴的偏移量,根据实际情况设定
				menu.style.top=(e.clientY-100)+'px';
			}else{
				menu.style.left=(e.clientX-60)+'px';
				menu.style.top=(e.clientY-100)+'px';
			}
			//改变自定义菜单的宽,让它显示出来
			menu.style.width='125px';
			if(that.menuModal){
				menu.style.height='25px';
			}else{
				menu.style.height='50px';
			}
			menu.style.zIndex=13;
			menu.style.boxShadow='0 1px 1px #888,1px 0 1px #ccc';
	  }
	  //关闭右键菜单,很简单
	  window.onclick=function(e){
		  //用户触发click事件就可以关闭了,因为绑定在window上,按事件冒泡处理,不会影响菜单的功能
		  if(document.querySelector('#menu')!=null)
    		 document.querySelector('#menu').style.height=0;
	  }
}

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值