编辑“︁HTML地理位置”︁

{{DISPLAYTITLE:HTML地理位置}}

'''HTML地理位置'''（Geolocation）是HTML5提供的一组API，允许网页在用户授权后获取其设备的地理位置信息。这一功能广泛应用于地图服务、本地化内容推荐、天气应用等场景。本文将详细介绍其工作原理、使用方法及实际案例。

== 概述 ==
HTML地理位置API通过浏览器提供对设备位置的访问权限，支持通过GPS、Wi-Fi、IP地址等方式获取经纬度坐标。由于涉及用户隐私，浏览器会强制要求用户明确授权后才能使用此功能。

核心特点：
* 基于{{code|navigator.geolocation}}对象实现
* 支持单次定位（{{code|getCurrentPosition}}）和持续追踪（{{code|watchPosition}}）
* 返回包含纬度、经度、精度等数据的{{code|Position}}对象
* 遵循W3C Geolocation API规范

== 基本用法 ==
=== 检测浏览器支持 ===
<syntaxhighlight lang="javascript">
if ("geolocation" in navigator) {
    console.log("地理位置API可用");
} else {
    console.error("该浏览器不支持地理位置功能");
}
</syntaxhighlight>

=== 获取当前位置 ===
<syntaxhighlight lang="javascript">
navigator.geolocation.getCurrentPosition(
    (position) => {
        console.log("纬度: " + position.coords.latitude);
        console.log("经度: " + position.coords.longitude);
    },
    (error) => {
        console.error("错误代码: " + error.code);
    }
);
</syntaxhighlight>

典型输出：
<pre>
纬度: 39.9042
经度: 116.4074
</pre>

== 参数详解 ==
=== Position对象结构 ===
{| class="wikitable"
|+ 核心属性
! 属性 !! 类型 !! 描述
|-
| {{code|coords.latitude}} || number || 十进制纬度
|-
| {{code|coords.longitude}} || number || 十进制经度
|-
| {{code|coords.accuracy}} || number || 位置精度（米）
|-
| {{code|timestamp}} || DOMTimeStamp || 获取时间戳
|}

=== 错误处理 ===
{| class="wikitable"
|+ 错误代码
! 代码 !! 常量 !! 描述
|-
| 1 || {{code|PERMISSION_DENIED}} || 用户拒绝授权
|-
| 2 || {{code|POSITION_UNAVAILABLE}} || 无法获取位置
|-
| 3 || {{code|TIMEOUT}} || 请求超时
|}

== 高级功能 ==
=== 定位选项参数 ===
可配置参数对象：
<syntaxhighlight lang="javascript">
const options = {
    enableHighAccuracy: true,  // 是否使用高精度模式
    timeout: 5000,            // 超时时间（毫秒）
    maximumAge: 300000        // 缓存位置的最大有效期
};
</syntaxhighlight>

=== 持续位置追踪 ===
<syntaxhighlight lang="javascript">
const watchId = navigator.geolocation.watchPosition(
    (position) => {
        // 实时更新位置
    },
    null,
    { enableHighAccuracy: true }
);

// 停止追踪
navigator.geolocation.clearWatch(watchId);
</syntaxhighlight>

== 实际案例 ==
=== 地图集成示例 ===
<syntaxhighlight lang="javascript">
function initMap() {
    navigator.geolocation.getCurrentPosition((pos) => {
        const map = new google.maps.Map(document.getElementById("map"), {
            center: { lat: pos.coords.latitude, lng: pos.coords.longitude },
            zoom: 15
        });
        new google.maps.Marker({
            position: map.getCenter(),
            map: map,
            title: "您的位置"
        });
    });
}
</syntaxhighlight>

=== 位置流程图 ===
<mermaid>
sequenceDiagram
    用户->>浏览器: 访问网页
    浏览器->>用户: 显示权限请求
    用户->>浏览器: 授权
    浏览器->>服务器: 获取位置数据
    服务器-->>浏览器: 返回坐标
    浏览器->>网页: 触发回调函数
</mermaid>

== 隐私与安全 ==
* 所有现代浏览器都会在首次访问时显示权限请求对话框
* HTTPS协议下地理位置API更可靠（某些浏览器禁止HTTP使用）
* 建议明确说明位置数据的用途（通过{{code|PositionOptions}}的{{code|enableHighAccuracy}}参数）

== 数学原理 ==
当使用多源定位时，系统可能通过三角测量计算位置：
<math>
(x - x_0)^2 + (y - y_0)^2 = r_0^2 \\
(x - x_1)^2 + (y - y_1)^2 = r_1^2 \\
(x - x_2)^2 + (y - y_2)^2 = r_2^2
</math>
其中<math>(x_n, y_n)</math>是参考点坐标，<math>r_n</math>是测量距离。

== 浏览器兼容性 ==
几乎所有现代浏览器都支持此API，包括：
* Chrome 5+
* Firefox 3.5+
* Safari 5+
* Edge 12+
* Opera 10.6+

== 最佳实践 ==
1. 始终添加错误处理回调
2. 对于移动设备，考虑电池消耗问题
3. 提供fallback方案（如IP定位）
4. 清晰说明位置数据用途
5. 在不需要时及时调用{{code|clearWatch()}}

== 参见 ==
* W3C Geolocation API规范
* 浏览器隐私策略
* Web地图服务集成（如Google Maps API）

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML高级特性]]