关于本文
本文是通过利用生成式 AI 的自动化生成流程创建的。我们查阅了 Geolocation API 和 Leaflet 的官方信息以及现有 Daily-Code-Samples 的静态演示，将其整理为不将位置信息保存在服务器上的最小化实时演示。
验证状态：📘 已确认官方信息与实现，尚未在手机真机上确认允许/拒绝操作
手机的当前位置并不是由 Leaflet 获取的。而是由浏览器标准的 Geolocation API 获取纬度和经度，然后将这些值传递给 Leaflet，从而在地图上放置标记。在屏幕上查看这种分工就是本次的目的。
首先尝试
现有示例在点击按钮之前不会请求位置信息。如果允许，将显示 latitude / longitude / accuracy，并在相同的坐标处绘制 Leaflet 标记和精度圆。如果拒绝，也会在屏幕上显示错误原因。
最小化代码如下。
button.addEventListener("click", () => {
navigator.geolocation.getCurrentPosition(
position => {
const { latitude, longitude, accuracy } = position.coords;
console.log({ latitude, longitude, accuracy });
L.marker([latitude, longitude]).addTo(map);
},
error => {
console.log("FAILED", error.code, error.message);
},
{
enableHighAccuracy: false,
timeout: 10000,
maximumAge: 0
}
);
});
Geolocation API 与安全上下文（secure context）和用户权限相关。
查看此处
在浏览器中将按以下顺序进行。
sequenceDiagram
participant U as User
participant B as Browser
participant G as Geolocation API
participant L as Leaflet
U->>B: 「現在位置を取得」を押す
B->>U: 位置情報の許可を要求
U-->>B: 許可 / 拒否
B->>G: getCurrentPosition
alt 許可・取得成功
G-->>B: latitude / longitude / accuracy
B->>L: 座標を渡す
L-->>U: markerを表示
else 拒否・失敗
G-->>B: error code
B-->>U: FAILED理由を表示
end
负责获取位置信息的角色和负责绘制地图的角色是各自独立的，这是观察的重点。
隐私方面需要注意的点
现有演示的 JavaScript 不会向 papanda925.com 或 GitHub 发送并保存获取到的纬度和经度。坐标仅用于屏幕显示和放置标记。
但是，在显示地图时，会发生获取 OpenStreetMap 地图瓦片的网络通信。不能声称“完全不进行外部通信”。不过并没有将位置信息本身嵌入到瓦片 URL 中的实现。
尝试修改一个地方
enableHighAccuracy 将 false 从 true 改为
enableHighAccuracy: true
并进行比较。accuracy结果会因终端和操作系统而异。不要断言精度一定会提高或获取一定变慢，而是将其作为教材，实际比较
与获取时间。
如果去掉 Leaflet 会剩下什么？
仅凭 Geolocation API 也可以获取纬度和经度。去掉 Leaflet 后，只是缺少了“将坐标作为地图展示的部分”而已。反过来说，仅凭 Leaflet 是无法擅自获取终端的 GPS/位置信息的。分离开浏览器 API 和库的职责来理解，即使将来替换成其他的地图库，也可以复用这种思路。
如果在工作中使用
在用户操作之前不请求位置信息
即使被拒绝也不会破坏页面
确认 HTTPS/安全上下文
不将经纬度发送到 analytics
如果需要保存，应另外设计目的、同意获取及保留期限
遵守外部瓦片的使用条款和版权声明（attribution）
确认库的版本和许可证
现有演示固定了 Leaflet 1.9.4 版本，并指定了 SRI。
GitHub 示例
如果在 GitHub Pages 上发布，请在 HTTPS 下运行，并在通过手机确认了允许和拒绝两种情况后，再上传到 verified。
官方信息与一手资料
总结
Geolocation API 用于获取位置，Leaflet 则将这些坐标在地图上展示出来。按顺序观察按钮操作、授权、坐标获取以及标记显示，可以清晰地理解浏览器标准 API 与外部库各自的角色，而不会将它们混淆。
