设置HTML DOM元素top/left样式时数值被科学计数法格式化求助

为什么会出现科学计数法+定位失效？ #

1. 科学计数法是浏览器的显示优化：当你设置的CSS数值过大（比如几百万px），浏览器会自动转换成科学计数法展示，但实际计算时还是用原数值。但这种超大数值早已超出屏幕可视区域，元素会跑到屏幕外，导致你误以为样式没生效。
2. 坐标源错误：你用的geom.centroid.x/y是地理/投影坐标系的坐标（比如GIS投影坐标单位是米，数值常为几万甚至几十万），不是屏幕像素坐标。直接把这类数值当成px使用，必然得到离谱的定位值。

正确设置步骤 #

• 转换为屏幕像素坐标：你使用的地图库（如Leaflet、Mapbox、OpenLayers）肯定提供了地理坐标转屏幕像素的方法，示例如下：
  • Leaflet：const point = map.latLngToContainerPoint([lat, lng])
  • Mapbox：const point = map.project([lng, lat])
  • OpenLayers：const point = map.getPixelFromCoordinate([lng, lat])
    这些方法得到的point.x和point.y是相对于地图容器的合理像素值，不会出现几百万的异常数值。
• 确保定位参考正确：把创建的hoverTip添加到地图容器内，并且给地图容器设置position: relative。因为absolute定位是相对于最近的非static定位父元素，这样top/left才会基于地图容器计算，而非整个页面。
• 修正后的代码示例：

  // 以Mapbox为例，先转换屏幕坐标
  const screenPoint = map.project([geom.centroid.x, geom.centroid.y]);
  const y = Math.round(screenPoint.y) + "px";
  const x = Math.round(screenPoint.x) + "px";
  
  const hoverTip = document.createElement('div');
  hoverTip.style.top = y;
  hoverTip.style.left = x;
  hoverTip.style.position = "absolute";
  hoverTip.textContent = county + ' county';
  
  // 将提示框添加到地图容器中，而非body
  document.getElementById('map-container').appendChild(hoverTip);
  

内容的提问来源于stack exchange，提问作者GeoGene