html5本身不提供地图或测距功能，实际是通过html5页面加载第三方地图SDK（如高德、Leaflet等），调用其API实现测距；必须基于经纬度使用球面公式或SDK地理计算函数，禁用像素距离估算。
HTML5 本身不提供地图或测距功能，所谓“HTML5嵌入地图测距”，实际是用 HTML5 页面（
容器、现代 js API）加载第三方地图 SDK（如高德、百度、腾讯或 Leaflet + OpenStreetmap），再调用其内置的测距工具或手动实现两点间距离计算。直接用纯 HTML5 标签无法完成——这点必须先明确，否则后续所有代码都会跑偏。
用高德地图 JS API 实现点击测距
这是国内最常用、文档最全、支持 AMap.Driving 和 AMap.LngLat 坐标系的距离测算方式。关键不是“HTML5”，而是引入高德 SDK 后调用其 AMap.GeometryUtil.distance 或测距控件。
- 在
中引入 SDK： - 初始化地图后，启用测距控件：
map.plugin(["AMap.MouseTool"], () => { new AMap.MouseTool(map).distance(); }); - 注意：测距结果默认单位为米，返回的是球面距离（WGS84 椭球模型），非直线像素距离
- 若需程序化获取距离，不要依赖控件 ui，改用
AMap.GeometryUtil.distance(lnglat1, lnglat2)手动传入两个AMap.LngLat实例
Leaflet + Turf.js 做前端离线测距
适合需要避开国内地图授权、或做地理分析（如多边形周长、折线总长）的场景。Leaflet 负责渲染，Turf.js 提供精确地理计算能力，全程不发请求，纯前端运行。
- 引入：
+ - 监听地图点击，收集
L.LatLng点位；用turf.distance(point1, point2, {units: 'meters'})计算两点距离 - 注意坐标顺序：Turf 要求
[lon, lat]（经度在前），而 Leaflet 的latlng是{lat: x, lng: y}，需手动转换 - 若测折线，用
turf.Length(line, {units: 'meters'})，输入是LineStringGeojson
常见错误：把屏幕像素距离当真实地理距离
新手常犯的错是用 clientX/clientY 算两点像素差，再乘一个“比例尺系数”——这在墨卡托投影地图上完全无效。不同纬度下，同样像素代表的实地距离差异极大（赤道 vs 北极圈可差 2 倍以上）。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要用
math.hypot(x1-x2, y1-y2) * scale这类方式估算地理距离 - 所有地理距离必须基于经纬度，走球面公式（如 Haversine）或调用地图 SDK / Turf 的地理计算函数
- 如果只是粗略估算且范围很小（turf.rhumbDistance（等角航线），性能略好于大圆距离，但误差可控
真正难的不是写几行代码调用测距，而是分清「UI交互测距」和「地理坐标计算」两层逻辑。前者靠地图 SDK 控件快速实现，后者靠 Turf 或自研公式确保精度。一旦混淆，量出来的“500米”可能实际是 3 公里。