Echarts结合百度地图绘制散点图，toolpit显示位置错位偏移问题解决

Echarts结合百度地图绘制散点图，toolpit显示位置错位偏移问题解决

在使用echarts结合百度地图绘制散点图的时候，会配置toolpit参数来显示鼠标知识散点的基本信息。当地图在不拖动的情况下提示框显示位置是正确的。但是当拖动并放大地图后，提示框显示位置就会发生偏移，甚至超出图形区域显示，对用户体验造成影响。如下：

在配置中配置toolpit参数：

tooltip: {
    trigger: 'item',
    confine:true,
    position: function(point, params, dom) { 
        return [0,0];    //设置固定值 都会偏移，不设置则跟随鼠标。还是不行
    }
},
 
 

 
 
1
2
3
4
5
6
7

配置alwaysShowContent :true，将提示框一直显示在页面，通过控制台查看，发现提示框其实就是一个div。其中样式 position控制他为相对定位，left和top会在地图拖动时更改。

解决思路

• 自定义一个div，用来模拟toolpit提示框
• 根据position: function(point, params, dom) 配置来设置自定义div的位置和内容

其中point为鼠标位置。dom就是toolpit的显示div。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考[Github][2].

1.HTML代码

在echarts dom上新增一个div,用来自定义模拟toolpit的提示框：

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

 
 
1
2

2.js配置

其他配置省略。

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设置为initial *重要，为了不让原来的tooltip dom乱跑
        $(m).html(dom);                      //将更改好的dom放入我们模拟的tooltip dom
        $(m).css("left",point[0]+20);        //设置模拟dom显示位置，此为鼠标位置
        $(m).css("top",point[1]+20);         //设置模拟dom显示位置，此为鼠标位置
        $(m).css("width",width+15);          //设置模拟dom宽度
        //不用return 在此我们只是用来获取我们想要的point和dom，并不更改原来的位置，因为改了也没用，不然我就不用这么麻烦了。。
    }
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

结果

可以实现一模一样的效果，并且不会发生偏移等。

原文地址：https://blog.csdn.net/github_36086968/article/details/79003601