如何在数据映射上获取正确的MouseHover坐标

Question

我使用的是DataMap，与地图的普通视图不同，我将地图颠倒了，当鼠标悬停时，工具提示位置与鼠标悬停时的鼠标位置不对应

为了获得准确的坐标，我尝试了其他代码，但没有一个能满足我的需求。

在地图上的反应组件

<Map mapRef= {this.myMap} makeMouseMove={this._onMouseMove} />

第一次尝试

  _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
          let rect = e.target.getBoundingClientRect();
          mapTooltip.style.left = e.clientX - rect.left + 'px';
          mapTooltip.style.top = e.clientY - rect.top + 'px';
       }
     }

第二次尝试

 _onMouseMove = (e) => {
        if (document.querySelector('.hoverinfo')) {
          let mapTooltip = document.querySelector('.datamaps-hoverover');
    mapTooltip.style.left = e.pageX - mapTooltip.offsetLeft+'px';
    mapTooltip.style.left = e.pageY - mapTooltip.offsetTop+'px';
       }
    }

不幸的是，我还没有实现我想要的目标，如果有经验的人可以处理Datamap问题，我将不胜感激。

Answer 1

万一其他人遇到这种类型的问题，这就是我要解决的问题，显然，左值是正确的，不需要我进行修改。

        _onMouseMove = (e) => {
           if (document.querySelector('.hoverinfo')){
             let mapTooltip = document.querySelector('.datamaps-hoverover');
             let mapHoverSVG = document.querySelector('svg');
             let point = mapHoverSVG.createSVGPoint();
             point.x = e.clientX;
             point.y = e.clientY;
             let cursor = point.matrixTransform(mapHoverSVG.getScreenCTM().inverse());
             mapTooltip.style.top = (cursor.y + 16) + "px";
             console.log(cursor.y); 
        }
      }