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;
	  }
}

});