如何在數據映射上獲取正確的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); 
        }
      }