鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ echarts結(jié)合百度地圖繪制散點圖,移動地圖后tooltip位置錯位

echarts結(jié)合百度地圖繪制散點圖,移動地圖后tooltip位置錯位

使用echarts結(jié)合百度地圖,在地圖上生成散點圖,也就是series:scatter。配置相關(guān)tooltip內(nèi)容,在不拖動地圖的情況向,tooltip顯示正常,跟隨鼠標(biāo)顯示,放大縮小地圖都正常。
但是當(dāng)拖動地圖,相應(yīng)的tooltip顯示就會移位,不管是position配置固定位置還是跟隨鼠標(biāo),都會移位,導(dǎo)致超出顯示區(qū)域,或者移位太遠(yuǎn)消失不見。


圖一,正常情況,只是縮放大小,沒有拖動地圖。
圖片描述

圖二,拖動地圖后,顯示移位
圖片描述


使用chrome調(diào)試器,查看了,tooltip的div在移動了地圖后,position位置變成了負(fù)數(shù),并不是指定的固定值,不知道這個有什么好辦法解決?還是我哪里配置錯了?

var option = {
                progressive:10000,
                bmap: {
                    zoom: 10,
                    roam: true,
                    mapStyle: mapstyle
                }, 
                tooltip: {
                        trigger: 'item',
                        confine:true,
                        formatter: function(item){
                              return "會員數(shù):"+item.value[2]+"<br/>周邊1公里覆蓋數(shù): "+item.value[3]+"<br/>藥店: "+item.name+"<br/>地址:"+item.data.addr;
                        }
                    },
                series: [{
                    name: '藥店',
                    type: 'scatter',
                    zlevel :100,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: 5,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal :{
                            //color:'#D74E67',
                            color:'#F9EB50',
                            opacity :1
                        }
                    },
                    data:data
                   
                },{
                    name: '會員數(shù)',
                    type: 'scatter',
                    zlevel :90,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: function (val) {
                            var size = val[2]/500;
                            size = size<15?15:size;    //限制最小10
                              size = size>30?30:size;  //限制最大28
                            return size;
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                   itemStyle: {
                        normal :{
                            color:'#458DBC',
                            opacity :1
                        }
                    },
                    data:data
                   
                },{
                    name: '覆蓋數(shù)',
                    type: 'scatter',
                    zlevel :50,
                    animation :false,
                    coordinateSystem: 'bmap',
                    symbolSize: function (val) {
                          var size = val[3]/500;
                            size = size<20?20:size;     //限制最小10
                              size = size>30?30:size;   //限制最大40
                            return size;
                    },
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                         normal :{
                            color:'#71BD98',
                            opacity :0.3
                        }
                    },
                    data:data
                }]
            };
回答
編輯回答
真難過

好吧搞定了 自定義的tooltip行內(nèi)style會被覆蓋,寫在class里面就可以了

2018年2月28日 10:39
編輯回答
別傷我

好吧,這么久了沒人回答。還是我自己來解決吧。。。搞了很久,想到了一個解決辦法。
首先,這確實是echarts的bug,并不是我沒有配置對,就算我配置option為固定值,他也還是會偏移。
在position中有幾個返回參數(shù)position: function(point, params, dom);
point:就是鼠標(biāo)當(dāng)前位置
dom:就是tooltip的dom對象。
有了這兩個參數(shù),我們就可以自己定義一個dom,然后這是他的位置,也就實現(xiàn)了tooltip的功能,也不會偏移~

html代碼

在charts的dom前面創(chuàng)建一個div,樣式如下,用來模擬現(xiàn)實tooltip

<div id="mapStoreClass" stytle="position: absolute;z-index: 9999;"></div>
<div id="chinaMap" style="text-align: left;width:100%;height:500px"></div>

js配置代碼

在配置tooltip的地方,將tooltip的dom參數(shù)丟給我們模擬的dom就可以了,并這是位置

tooltip: {
    trigger: 'item',
     confine:true,
    position: function(point, params, dom) { 
        var width = $(dom).width();     //獲取tooltip原來的width
        var m = $("#mapStoreClass");    //獲取我們自定義模擬的tooltip dom
        $(dom).css("position","initial");    //將原來的tooltip設(shè)置為initial *重要,為了不讓原來的tooltip dom亂跑
        $(m).html(dom);                      //將更改好的dom放入我們模擬的tooltip dom
        $(m).css("left",point[0]+20);        //設(shè)置模擬dom顯示位置,此為鼠標(biāo)位置
        $(m).css("top",point[1]+20);         //設(shè)置模擬dom顯示位置,此為鼠標(biāo)位置
        $(m).css("width",width+15);          //設(shè)置模擬dom寬度
        //不用return 在此我們只是用來獲取我們想要的point和dom,并不更改原來的位置,因為改了也沒用,不然我就不用這么麻煩了。。
    }

就這么簡單,成功解決,并完美的實現(xiàn)了tooltip功能,不會偏移。

2017年10月28日 08:13