正在加载...

HTML Geolocation

上一课 Web Storage 记住键/值字符串。本课离开保存，介绍 Geolocation：通过 navigator.geolocation 读取大致经纬度——仅在用户授权后。HTML 加载询问位置的脚本。范围务实——单次读取、watch/clear、礼貌拒绝——不是地图 SDK 或地理数据库课。

为何在 HTML 课学 geolocation

初学者常做「附近」按钮或显示坐标。Geolocation 是常见的第一套浏览器 API。在 web storage 之后，分工不同：HTML 拥有外壳与按钮；JS 请求该源的坐标。只需 getCurrentPosition、了解 watchPosition，并处理拒绝。

直接回答

1) 调用 getCurrentPosition。2) 读取 latitude/longitude。3) 最好在用户点击后再问。4) 持续更新用 watchPosition；用 clearWatch 停止。5) 没有 HTML 标签。6) 若拒绝，保持页面仍可用。

📊 getCurrentPosition vs watchPosition

Topic getCurrentPosition watchPosition
Typical use One-shot “where am I now” Ongoing updates while watching
Callback pattern success once (plus optional error) success may fire repeatedly
Stop watching Not needed (single read) clearWatch(watchId)
Beginner fit Share-location button Live tracking demos (careful)
Permission Still required Still required
This course depth Intro focus Short demo + clearWatch only

微型 getCurrentPosition 演示

点击可请求当前位置并打印经纬度。若无 API 或用户拒绝，显示平静提示。

getCurrentPosition with permission

html 
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>

阅读 getCurrentPosition 调用

  • navigator.geolocation 是入口
  • getCurrentPosition 询问一次
  • latitude/longitude 是初学者先打印的数字
  • 先做特性检测
  • error 回调覆盖拒绝
  • 实际演示更宜 HTTPS
  • 与 Web Storage 不同：这里是读取，不是保存

用于持续更新的 watchPosition

设备移动时 success 可能再次触发。保存返回的 id 并用 clearWatch——入门演示不要让 watch 一直跑。

watchPosition and clearWatch

html 
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>

阅读 watchPosition 思路

  • 与 getCurrentPosition 相同的权限模型
  • success 在监视期间可能多次运行
  • clearWatch 停止更新——演示务必提供停止
  • 仍不是地图库；只收到坐标
  • 仍不是 Web Storage
  • 按需要修复的频率选择 get 或 watch
  • 下一课：drag and drop

选择何时询问

  • 用户点击「分享位置」：合适时机
  • 无上下文的页面加载：通常不好
  • 需要持续移动更新：watchPosition + 可见停止
  • 保存主题偏好：那是 Web Storage
  • 完整地图/路线产品：超出本 HTML 入门
  • 静默追踪广告：反模式

练习 — 礼貌请求一次定位

  1. 粘贴 getCurrentPosition 演示；点击并接受或拒绝。
  2. 确认显示坐标或平静拒绝信息。
  3. 粘贴 watchPosition；开始后点停止。
  4. （可选）拒绝权限且页面不崩溃。
  5. 一句话：Web Storage 存字符串；Geolocation 经许可读坐标。
  6. 若浏览器限制 file://，改用 http(s) 提供页面。
  7. 预告：drag and drop 拖动元素——不是定位。

易错点

  • 期待 HTML <geolocation> 标签
  • 每次加载无说明就询问
  • 忽略拒绝时的 error 回调
  • 与 Web Storage 混淆
  • 留下 watchPosition 却不 clearWatch
  • 假定处处精确 GPS
  • 把本入门当成完整地图或隐私法课程

小结

  • Geolocation 是 navigator.geolocation 上的需许可 JS API
  • getCurrentPosition 读一次；watchPosition + clearWatch 处理持续更新
  • HTML 提供界面；尽可能在明确用户操作后再问
  • 温和处理拒绝与不支持
  • Web Storage 是记住的字符串；本课是获准的坐标
  • 下一课：HTML drag and drop

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
5
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 64 的 68
Html 教程