HTML 无法直接实现地理围栏，因其仅为标记语言，无定位能力；实际需结合 JavaScript 调用 Geolocation API 并自行实现围栏判断逻辑，且须处理权限、精度、后台限制等真实约束。
HTML 本身不能做地理围栏
直接说结论：HTML 是标记语言，没有定位能力，更不支持地理围栏（geofence）逻辑。所谓“HTML 做地理围栏”，实际是用 HTML 搭配 JavaScript 调用浏览器 Geolocation API，再结合服务端或本地计算实现围栏判断——但关键逻辑一定不在 HTML 里。
常见错误现象：getCurrentPosition 一直失败、watchPosition 不触发、围栏进入提醒延迟或漏报。
- 浏览器必须运行在
https或localhost下，http（非本地）会直接拒绝Geolocation API -
Geolocation API只提供经纬度和精度，不提供“是否在某个多边形内”的判断，这部分得自己写或用库（如turf.js的turf.booleanPointInPolygon） - 移动端 Safari 对后台定位限制极严，
watchPosition在页面切到后台后几秒内就会暂停，无法持续监听
怎么用 JavaScript 实现基础圆形围栏判断
最常用场景：监控用户是否进入/离开以某点为中心、半径 R 米的圆。别直接算球面距离，用浏览器原生 distance 属性（来自 position.coords）最省事。
示例逻辑：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
function isInsideCircle(lat, lng, centerLat, centerLng, radiusMeters) {
const pos = { coords: { latitude: lat, longitude: lng } };
const distance = getDistanceFromPosition(pos, {
coords: { latitude: centerLat, longitude: centerLng }
});
return distance <= radiusMeters;
}
<p>// 浏览器原生方法（无需额外库）
function getDistanceFromPosition(pos1, pos2) {
const R = 6371e3; // 地球半径，单位米
const φ1 = (pos1.coords.latitude <em> Math.PI) / 180;
const φ2 = (pos2.coords.latitude </em> Math.PI) / 180;
const Δφ = ((pos2.coords.latitude - pos1.coords.latitude) <em> Math.PI) / 180;
const Δλ = ((pos2.coords.longitude - pos1.coords.longitude) </em> Math.PI) / 180;</p><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;
}
- 注意
getDistanceFromPosition返回单位是米，和围栏半径单位保持一致 - 不要每 100ms 调一次判断——频繁计算 + 高频
watchPosition会显著耗电，建议用enableHighAccuracy: false+ 合理timeout/maximumAge - 首次定位可能偏差 > 500 米，用
coords.accuracy过滤掉不可靠位置（例如只处理accuracy < 100的点）
为什么面试常考？因为容易踩的坑都在边界上
面试官不是想看你抄一段计算距离的代码，而是看你怎么应对真实约束：
- 用户没开定位权限时，
getCurrentPosition的error.code是1（PERMISSION_DENIED），但 iOS Safari 在用户点“不允许”后，后续调用会直接进error回调且不再弹窗，无法重试 - 围栏触发必须去重：同一位置反复进出几百米半径围栏，可能因定位抖动在边界来回触发，得加时间/距离防抖（例如 30 秒内相同状态不再提醒）
- 纯前端围栏无法保证可靠性：用户关 GPS、切后台、杀进程，都会中断监听。生产环境必须配合服务端下发围栏规则 + 上报位置 + 由服务端触发推送（如 Firebase Cloud Messaging）
真正上线项目该怎么做
拿一个典型流程说：用户打开 H5 页面，想在到达某门店 300 米内收到优惠提醒。
- 前端只负责采集并上报高置信度位置（
accuracy <= 50且timestamp新于 30 秒），频率控制在 30–60 秒一次 - 上报数据包含
latitude、longitude、accuracy、timestamp，由服务端查该用户所有待激活围栏，用 PostGIS 或geojson-area类库批量判断 - 服务端判定进入后，走 APNs / HMS Push 推送消息，而不是依赖前端
alert()或Notification.requestPermission() - 如果必须前端提示，用
NotificationAPI 前先检查Notification.permission === 'granted'，否则静默丢弃
地理围栏真正的复杂点从来不在“怎么算距离”，而在于权限链路、定位质量兜底、前后端状态同步、以及 iOS/Android 后台行为差异——这些才是上线前反复踩坑的地方。
