大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
从 Chrome 144 版本开始，开发者可以使用全新的
为什么要使用元素
目前，地理位置信息流依赖于 Geolocation API，该 API 会触发权限提示。如果提示出现得不合时宜，例如：在页面加载时触发，就可能打断用户的操作。更重要的是，由于浏览器的干预，依赖这些强制性提示变得越来越不可行。例如：如果用户三次忽略提示，Chrome 会主动阻止权限请求，强制执行一个初始持续时间为一周的临时静默阻止。这意味着尝试触发提示的旧代码可能会静默失败，导致用户体验不佳且无法明确启用该功能。
if ("geolocation" in navigator) { /* geolocation is available */} else { /* geolocation IS NOT available */}function success(position) { doSomething(position.coords.latitude, position.coords.longitude);}function error() { alert("Sorry, no position available.");}const options = { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000,};const watchID = navigator.geolocation.watchPosition(success, error, options);navigator.geolocation.getCurrentPosition((position) => { doSomething(position.coords.latitude, position.coords.longitude);});此外，标准提示通常缺乏上下文。如果提示意外出现，用户可能会下意识地或无意中阻止而没有意识到此操作会造成难以撤销的永久性阻止。这种上下文缺失而非功能本身才是导致高拒绝率的主要原因。
- 清晰的意图和时机：用户点击 “使用位置” 按钮，即可明确表明其在特定时刻使用位置信息的意图。这表明用户理解位置信息的价值并主动希望使用，从而将潜在的阻止转化为成功的交互。
- 简化的恢复流程：如果用户之前在浏览网站时阻止了位置访问权限，点击该元素将触发专门的恢复流程，从而有助于用户在真正需要使用位置信息时重新启用而无需费力地深入浏览器设置。
- 自动刷新：如果已授予权限，点击该元素将如同刷新按钮一般，立即获取新数据而无需再次提示。
如何使用元素
集成该元素所需的样板代码比 JavaScript API 少得多。开发者无需手动管理回调和错误状态，只需将该标签添加到页面并监听 onlocation 事件即可。
function handleLocation(event) { if (event.target.position) { const { latitude, longitude } = event.target.position.coords; console.log("Location retrieved:", latitude, longitude); } else if (event.target.error) { console.error("Error:", event.target.error.message); }}下面是关键属性和特性：
- autolocate：元素加载时自动尝试获取位置信息，但前提是当前权限状态已允许
- accuracymode：接受“precise”或“approximate”值，对应于标准的 enableHighAccuracy 选项
- watch：切换行为以匹配 watchPosition()，在用户移动时持续触发事件
- position：DOM 元素上的只读属性，一旦 GeolocationPosition 对象可用，则返回该对象
- error：只读属性，如果请求失败，则返回 GeolocationPositionError
渐进增强策略
标准化新的 HTML 元素是一个循序渐进的过程。但是，开发者现在就可以采用
该元素的设计旨在实现优雅降级，即不支持
如果想完全控制回退（Fallback）体验，可以使用子元素（例如：按钮），并将其与常规 JavaScript 地理位置 API 结合起来。
<!-- Fallback contents if the element is not supported --> 参考资料
https://developer.chrome.com/blog/geolocation-html-element
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API
