Geolocation API通过JavaScript的navigator.geolocation调用，使用getCurrentPosition()获取用户位置，需处理权限与错误。
HTML 本身没有“函数”这一概念，但可以通过 JavaScript 调用浏览器提供的 Geolocation API 实现地理定位功能。这个 API 不属于 HTML 标准，而是现代浏览器支持的 JavaScript 接口，常在网页中用于获取用户的地理位置信息。
如何调用 Geolocation API
要使用地理定位功能，需通过 JavaScript 的 navigator.geolocation 对象调用相关方法。最常用的是 getCurrentPosition() 方法，用于获取用户当前的地理位置。
基本调用语法如下：
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log(`纬度: ${lat}, 经度: ${lng}`);
},
function(error) {
console.error("定位失败:", error.message);
}
);
} else {
console.log("您的浏览器不支持地理定位");
}
参数说明与回调函数
getCurrentPosition() 接收两个主要回调函数：
立即学习“前端免费学习笔记（深入）”；
- 成功回调：传入 Position 对象，包含 coords 属性（如 latitude、longitude、accuracy 等）
- 失败回调：传入错误对象，error.code 可能为 1（用户拒绝）、2（位置不可用）、3（超时）
还可传入第三个参数设置选项：
{
enableHighAccuracy: true, // 是否启用高精度模式（如 GPS）
timeout: 10000, // 最大等待时间（毫秒）
maximumAge: 60000 // 缓存时间，60秒内可复用旧数据
}
实际应用示例
将定位结果显示在页面上：
function showPosition() {
const status = document.getElementById("status");
const mapLink = document.getElementById("map-link");
if (navigator.geolocation) {
status.textContent = "正在获取位置...";
navigator.geolocation.getCurrentPosition(
(position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
mapLink.href = `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}`;
mapLink.textContent = `纬度: ${lat}, 经度: ${lng}`;
status.textContent = "";
},
(error) => {
switch(error.code) {
case 1:
status.textContent = "用户拒绝共享位置";
break;
case 2:
status.textContent = "位置不可用";
break;
case 3:
status.textContent = "请求超时";
break;
}
}
);
} else {
status.textContent = "浏览器不支持地理定位";
}
}
对应的 HTML 结构：
查看地图
注意事项与权限问题
现代浏览器出于隐私保护，默认不会自动授权定位。首次调用时会弹出权限请求框。如果用户拒绝，后续调用将无法获取数据，除非手动在浏览器设置中重新授权。
该功能必须在安全上下文中运行，即页面需通过 HTTPS 协议加载（本地测试时 localhost 也可行）。
基本上就这些。Geolocation API 使用简单，但在真实项目中需处理好错误情况和用户体验。
