html无法实现地理围栏，必须依赖javascript调用navigator.geolocation.watchposition持续获取位置，并结合haversine公式（圆形）或射线法（多边形）判断进出，且需处理精度、后台失效及服务端补位。
HTML 本身无法实现地理围栏（Geofencing）——它没有位置监听、区域进出判断或后台触发能力。真正起作用的是 JavaScript 调用浏览器 navigator.geolocation API + 自行实现的坐标比对逻辑，且必须配合用户主动授权与持续定位。
为什么 navigator.geolocation.watchPosition 是唯一可行起点
地理围栏本质是“持续监控用户是否进入/离开某个多边形或圆形区域”，而 HTML 标准中只有 watchPosition 能提供周期性位置更新（getCurrentPosition 只能取一次）。不使用它，就谈不上“围栏”。
- 必须传入
enableHighAccuracy: true，否则 GPS 精度不足（尤其在城区），容易误判进出 - 需设置
maximumAge和timeout，避免旧数据干扰或卡死监听 - 浏览器不会在页面后台/休眠时继续调用回调——这意味着「离开页面后仍触发围栏」在纯前端不可行
圆形围栏：用 haversine 公式判断距离比用欧氏距离靠谱
直接用经纬度差值算距离（如 Math.sqrt((lat1-lat2)**2 + (lng1-lng2)**2)）在高纬度地区误差极大。必须换球面距离计算。
简版 haversine 函数示例（单位：米）：
function haversine(lat1, lng1, lat2, lng2) {
const R = 6371e3; // 地球半径（米）
const φ1 = (lat1 * Math.PI) / 180;
const φ2 = (lat2 * Math.PI) / 180;
const Δφ = ((lat2 - lat1) * Math.PI) / 180;
const Δλ = ((lng2 - lng1) * Math.PI) / 180;
<p>const a = Math.sin(Δφ/2) <em> Math.sin(Δφ/2) +
Math.cos(φ1) </em> Math.cos(φ2) <em>
Math.sin(Δλ/2) </em> Math.sin(Δλ/2);
const c = 2 <em> Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R </em> c;
}</p>
- 把围栏中心点和用户实时坐标传入，结果 ≤ 半径（单位一致）即为“在内”
- 别省略单位换算：后端给的半径如果是千米，要 ×1000；地图 SDK 返回坐标可能是 WGS84，但浏览器
geolocation也是 WGS84，可直接用 - 频繁调用
haversine性能无压力，但建议加防抖（比如 5 秒内只校验一次），避免重复触发
多边形围栏：用 google.maps.Polygon.containsLocation 不行，得手写射线法
如果你没引入 Google Maps JS API，或不想依赖第三方地图库，就得自己判断点是否在多边形内。浏览器原生不提供该能力，containsLocation 是 Google 的方法，不是标准 API。
- 推荐用经典的“偶奇规则”（ray casting）：从目标点向右水平发射射线，统计与多边形边的交点数，奇数则在内
- 注意边界情况：点恰在顶点或边上——实际业务中建议放宽容差（如 ±0.00001 度），避免因浮点误差漏判
- 顶点数组格式必须是
[[lat, lng], [lat, lng], ...]，顺序需一致（顺/逆时针不影响射线法） - 若围栏数量多、顶点密集，可先用包围盒（bounding box）快速过滤，再进射线法
真正难的从来不是“怎么算”，而是“什么时候算”和“算完怎么用”。用户关闭定位、切到后台、锁屏、GPS 信号漂移——这些都会让围栏失效。如果业务强依赖进出事件（比如打卡、推送），必须接受前端方案存在盲区，并在服务端补位（例如结合基站/WiFi 定位、定时上报位置做离线判定）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
