React 组件中的 Geolocation API

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 请求一次设备位置。成功回调会接收一个 GeolocationPosition 对象。当您只需要获取一次位置时，这种方式很合适，例如在用户点击按钮时查找最近的商店，而不是持续跟踪移动情况。

navigator.geolocation.watchPosition(successCallback, errorCallback, options) 会在设备位置发生变化时持续触发回调。它会返回一个数值型的 watchId。这种方式适用于配送跟踪或逐向导航等实时场景，因为这些场景要求位置保持最新。

GeolocationPosition 对象包含一个 coords 属性，其中有 latitude、longitude 和 accuracy（单位为米）。其他可选字段包括 altitude、altitudeAccuracy、heading 和 speed。timestamp 字段记录捕获位置的时间。

错误回调会接收一个带有数值型 code 属性的 GeolocationPositionError。代码 1 表示 PERMISSION_DENIED（用户拒绝），代码 2 表示 POSITION_UNAVAILABLE（硬件或网络故障），代码 3 表示 TIMEOUT（请求耗时过长）。请始终处理这三种情况。

watchPosition 监听器会一直运行，直到您将其停止。在 useEffect 中返回一个清理函数，并在其中调用 navigator.geolocation.clearWatch(watchId)。如果忘记清理，监视器会在组件卸载后继续运行，消耗电量，还可能更新已卸载组件的状态。

useGeolocation 钩子管理一个状态值，该状态有四种可能：idle（尚未请求）、loading（请求进行中）、success（已接收位置）和 error（失败）。它还会将 position 和 errorMessage 保存在状态中。这样，组件就能获得简洁且一致的接口。

当用户拒绝地理位置权限时，请显示一条有帮助的消息，说明该功能为什么需要位置访问权限，以及如何在浏览器设置中重新启用权限。绝不要直接向用户显示原始错误代码。请提供手动输入地址的回退方案，让用户即使不授予位置权限也能使用该功能。

与大多数强大的浏览器接口一样，地理位置功能也仅限于安全上下文。在普通 HTTP 页面上，navigator.geolocation 是 undefined。在开发环境中，localhost 无需 HTTPS 也可以使用该功能。在生产环境中，请始终确保应用通过 HTTPS 提供服务，否则用户永远不会看到权限请求。

getCurrentPosition 和 watchPosition 的第三个可选参数接受一个选项对象。enableHighAccuracy: true 会请求 GPS 级别的精度，但会消耗更多电量。timeout 设置最长等待时间（毫秒）。如果缓存的位置是在指定的毫秒数内捕获的，maximumAge 允许使用该缓存位置。

地理位置功能可以实现“查找我附近的商店”、在地图上跟踪配送员、根据当前城市提供天气信息、发布带有位置标签的帖子，以及计算用户与目的地之间的距离等功能。在请求权限之前，请始终清楚地向用户说明应用为什么需要其位置信息。

Chrome DevTools 允许您设置一个模拟的设备位置。打开 DevTools，进入三点菜单，选择“更多工具”，然后选择“传感器”。您可以输入纬度和经度坐标来模拟任意位置。这比实际前往不同地点测试依赖位置的功能快得多。

GeolocationPositionError 的 code 值为 1 表示什么？

使用 getCurrentPosition 一次性读取位置，使用 watchPosition 持续跟踪位置。始终在 useEffect 清理函数中调用 clearWatch。构建一个具有 idle、loading、success 和 error 状态的 useGeolocation 钩子。妥善处理权限拒绝，并记住生产环境中的地理位置功能需要 HTTPS。