[英]How to get correct MouseHover Coordinates on datamaps
我使用的是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问题的人能为我提供线索,我将不胜感激。
如果其他人遇到这种类型的问题,这就是我要解决的问题,显然,左值是正确的,不需要我修改它。
_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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.