我正在尝试把一个div的 top和 left样式属性设定在屏幕上的某个位置，但它不起作用。无论我如何定义这些属性，它们似乎都会被重新格式化成一个完全不同的数字。

const y = Math.round(geom.centroid.y).toString() + "px"
const x = Math.round(geom.centroid.x).toString() + "px"
console.log("screen point = ", x, ", ", y )
const innerText = county + ' county'
const hoverTip = document.createElement( 'div' )
hoverTip.style.top = "3606222px"  //tried hard coding the x value to no avail
hoverTip.style.left = x 
hoverTip.style.position = "absolute"

这是在控制台查看该元素时我一直看到的。

<div style="top: 3.60622e+06px; left: -9.48614e+06px; position: absolute;">Jackson county</div>

有人能解释这是怎么回事以及如何设置top和 left的样式属性吗？

解决方案

DevTools并没有改变你的数值——它只是把它们以科学记数法显示出来。

3.60622e+06px = 3606220px

你的真正问题是这些数值太大，因此元素被定位到了屏幕之外。

geom.centroid 并不是屏幕像素（很可能是地图/SVG坐标）。在使用 top/left 之前，你需要把它转换为视口坐标。