实现方式:采用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;
}
}
});