获取 HTML 元素的位置坐标

获取 HTML 元素的位置坐标，可以使用 JavaScript 中的 DOM 操作来实现。下面是一个示例代码，展示如何使用 JavaScript 获取指定类名的元素的位置坐标：

htmlCopy code
<!DOCTYPE html>
<html>
<body>
  <div class="my-element">This is a div element.</div>

  <script>
    // 获取具有指定类名的元素
    var element = document.querySelector('.my-element');

    // 获取元素的位置信息
    var rect = element.getBoundingClientRect();

    // 输出元素的位置坐标
    console.log('元素的左上角坐标：', rect.left, rect.top);
    console.log('元素的右下角坐标：', rect.right, rect.bottom);
    console.log('元素的宽度和高度：', rect.width, rect.height);
  </script>
</body>
</html>

在上述代码中，我们首先使用 querySelector() 方法获取具有指定类名 .my-element 的元素。然后，使用 getBoundingClientRect() 方法获取该元素的位置信息，返回一个包含左上角坐标、右下角坐标、宽度和高度等属性的 DOMRect 对象。

最后，我们使用 console.log() 方法将元素的位置坐标输出到控制台。您可以根据实际需要使用这些坐标信息。

请注意，获取的位置坐标是相对于视口（viewport）的坐标，而不是相对于整个页面的坐标。如果需要获取相对于页面的坐标，可以结合 window.scrollX 和 window.scrollY 属性进行计算。

.获取元素在文档上的坐标

function DocuemntHtmlPageXY (elem) {
 var rect = elem.getBoundingClientRect();
 var scrollTop = window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
 var scrollLeft = window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;
 var html = document.documentElement || document.getElementsByTagName_r('html')[0];
 //修复ie6 7 下的浏览器边框也被算在 boundingClientRect 内的 bug
 var deviation = html.getBoundingClientRect();
 //修复 ie8 返回 -2 的 bug
 deviation = { //FF 不允许修改返回的对象
 left: deviation.left < 0 ? 0 : deviation.left,
 top: deviation.top < 0 ? 0 : deviation.top
 };
 return {
 left: rect.left + scrollLeft - deviation.left,
 top: rect.top + scrollTop - deviation.top
 };
 }

2.举例如下：

近在做一个微信端的应用，其中有一个功能是这样的功能：不管怎么移动百度地图都能获取到屏幕中心点的坐标。这种功能在ios端和android端通过一些逻辑计算很容易就实现了，但是在web端想要动态的获取地图屏幕中心点的坐标，通过计算就不是那么容易实现的了。通过翻找百度地图手册收发现百度地图在js接口中提供的有一个方法，下面只列出关键性的代码：

var map = new BMap.Map("allmap");

map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);

var bs = map.getBounds(); //获取可视区域

var bssw = bs.getSouthWest(); //可视区域左下角

var bsne = bs.getNorthEast(); //可视区域右上角

//alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);

var pt = bs.getCenter(); //获取地图中心点

//根据中心点坐标添加弹跳动画marker

var point = new BMap.Point(pt.lng, pt.lat);

var marker = new BMap.Marker(point); // 创建标注

map.addOverlay(marker);// 将标注添加到地图中

marker.setAnimation(BMAP_ANIMATION_BOUNCE);