HTML5本身不提供地图或测距功能，实际是通过HTML5页面加载第三方地图SDK（如高德、Leaflet等），调用其API实现测距；必须基于经纬度使用球面公式或SDK地理计算函数，禁用像素距离估算。
HTML5 本身不提供地图或测距功能，所谓“HTML5嵌入地图测距”，实际是用 HTML5 页面（ 这是国内最常用、文档最全、支持 适合需要避开国内地图授权、或做地理分析（如多边形周长、折线总长）的场景。Leaflet 负责渲染，Turf.js 提供精确地理计算能力，全程不发请求，纯前端运行。 新手常犯的错是用 立即学习“前端免费学习笔记（深入）”； 真正难的不是写几行代码调用测距，而是分清「UI交互测距」和「地理坐标计算」两层逻辑。前者靠地图 SDK 控件快速实现，后者靠 Turf 或自研公式确保精度。一旦混淆，量出来的“500米”可能实际是 3 公里。用高德地图 JS API 实现点击测距
AMap.Driving 和 AMap.LngLat 坐标系的距离测算方式。关键不是“HTML5”，而是引入高德 SDK 后调用其 AMap.GeometryUtil.distance 或测距控件。
中引入 SDK：
map.plugin(["AMap.MouseTool"], () => { new AMap.MouseTool(map).distance(); });
AMap.GeometryUtil.distance(lnglat1, lnglat2) 手动传入两个 AMap.LngLat 实例Leaflet + Turf.js 做前端离线测距
+
L.LatLng 点位；用 turf.distance(point1, point2, {units: 'meters'}) 计算两点距离[lon, lat]（经度在前），而 Leaflet 的 latlng 是 {lat: x, lng: y}，需手动转换turf.length(line, {units: 'meters'})，输入是 LineString GeoJSON常见错误：把屏幕像素距离当真实地理距离
clientX/clientY 算两点像素差，再乘一个“比例尺系数”——这在墨卡托投影地图上完全无效。不同纬度下，同样像素代表的实地距离差异极大（赤道 vs 北极圈可差 2 倍以上）。
Math.hypot(x1-x2, y1-y2) * scale 这类方式估算地理距离
