echarts地圖下鑽右擊添加返回上一級

1.首先在頁面中新建一個替代默認右擊的懸浮框

<div id="contextMenu">返回上一級</div>

2.屏蔽自身的右擊事件

//屏蔽右擊事件
   myChart._dom.oncontextmenu = function(){
        return false;
    }

3.定位右擊懸浮框的位置

  myChart.on('contextmenu', function(params) {
        $('#contextMenu').css({
            left: params.event.offsetX,
            top: params.event.offsetY
        }).show();
    });

3.給懸浮框添加單擊事件

$('#contextMenu').on('click', function () {
        $(this).hide();
        var map = mapStack.pop();
        if(mapStack.length == 0){
            clickCode='';
            $('#contextMenu').hide();
        }else{
            clickCode=mapStack[0].code;
        }
    getMapData(clickCode,companyType,industryCode);
})

//地圖單擊時往數組push記錄上一次的區域id
myChart.on('click', function (params) {
        if(params.componentSubType!='map')return;//只有點省區纔有單擊事件
     
        if(flag){//防止多次右擊事件
            flag=false;
            if(typeof(params.data) == "undefined"){
                clickCode='';
                mapStack=[];
            }else{
                clickCode=params.data.code;
                mapStack.push({
                    code: clickCode,
                });
            }
            getMapData(clickCode,companyType,industryCode);
          
            setTimeout(function () {
                flag=true;
            },200)
        }

    });```
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章