⬅️ 返回地图
第 25 话

定位追踪:你在哪?

HTML5 赋予了浏览器感知位置的能力。现在,它知道你是不是躲在厕所里摸鱼了。

1. 导航仪 (Geolocation)
🛰️
卫星大叔: "只要你同意,我就能通过 GPS、WiFi 或 IP 地址找到你的坐标!精确到米哦!"

navigator.geolocation 是浏览器内置的导航仪。但因为隐私问题,它必须先询问用户

// 检查浏览器是否支持 if (navigator.geolocation) { // 请求位置 (成功回调, 失败回调) navigator.geolocation.getCurrentPosition(showPosition, showError); } else { alert("你的浏览器太老了,找不到路!"); }
2. 获取坐标

一旦用户点击"允许",我们就能拿到经纬度。

function showPosition(position) { var lat = position.coords.latitude; // 纬度 var lon = position.coords.longitude; // 经度 console.log("纬度: " + lat + ", 经度: " + lon); }
(假装这里有一张地图)
3. 异常处理
🙅‍♂️
傲娇的用户: "我才不要告诉你我在哪!(点击拒绝)"

除了用户拒绝,还可能因为信号不好等原因失败。我们需要处理这些情况。

function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: alert("用户拒接了定位请求 (哼!)"); break; case error.POSITION_UNAVAILABLE: alert("信号不好,连不上卫星。"); break; case error.TIMEOUT: alert("请求超时,卫星睡着了。"); break; case error.UNKNOWN_ERROR: alert("发生了未知的神秘错误。"); break; } }