HTML5 地理定位

w3school 在线教程

## HTML 基础教程

- HTML 教程
- HTML 简介
- HTML 编辑器
- HTML 基础
- HTML 元素
- HTML 属性
- HTML 标题
- HTML 段落
- HTML 样式
- HTML 格式化
- HTML 引用
- HTML 计算机代码
- HTML 注释
- HTML CSS
- HTML 链接
- HTML 图像
- HTML 表格
- HTML 列表
- HTML 块
- HTML 类
- HTML 布局
- HTML 响应式设计
- HTML 框架
- HTML 内联框架
- HTML 背景
- HTML 脚本
- HTML 头部
- HTML 实体
- HTML URL
- HTML URL 编码
- HTML Web 服务器
- HTML 颜色
- HTML 颜色名
- HTML 文档类型
- HTML 速查手册

## HTML XHTML

- XHTML 简介
- XHTML 元素
- XHTML 属性

## HTML 表单

- HTML 表单
- HTML 表单元素
- HTML 输入类型
- HTML 输入属性

## HTML5

- HTML5 简介
- HTML5 支持
- HTML5 元素
- HTML5 语义
- HTML5 迁移
- HTML5 代码约定

## HTML 图形

- HTML5 画布
- HTML5 SVG
- HTML5 画布 vs SVG

## HTML 媒体

- HTML 媒体
- HTML 对象
- HTML 音频
- HTML 视频

## HTML API

- HTML5 地理定位
- HTML5 拖放
- HTML5 Web 存储
- HTML5 应用缓存
- HTML5 Web Workers
- HTML5 SSE

## 实例/测验/总结

- HTML 实例
- HTML 测验
- HTML 总结

## HTML 参考手册

- HTML 标签列表
- HTML 属性
- HTML 事件
- HTML 合法 DTD
- HTML 颜色名
- HTML 字符集
- HTML ASCII
- HTML ISO-8859-1
- HTML 符号
- HTML URL 编码
- HTML 语言代码
- HTML 消息

## HTML5

- HTML5 教程
- HTML5 参考手册

## 建站手册

- 网站构建
- 万维网联盟 (W3C)
- 浏览器信息
- 网站品质
- 语义网
- 职业规划
- 网站主机

## 关于 W3School

## 帮助 W3School

## 广告刊例

# HTML5 地理定位

- HTML 视频
- HTML5 拖放

HTML5 Geolocation（地理定位）用于定位用户的位置。

亲自试一试：在谷歌地图上显示您的位置

## 定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

## 浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

## HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

### 实例

    <script>
    var x=document.getElementById("demo");
    function getLocation()
      {
      if (navigator.geolocation)
        {
        navigator.geolocation.getCurrentPosition(showPosition);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
    function showPosition(position)
      {
      x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
      }
    </script>

亲自试一试

例子解释：

- 检测是否支持地理定位
- 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
- 如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
- showPosition() 函数获得并显示经度和纬度

上面的例子是一个非常基础的地理定位脚本，不含错误处理。

## 处理错误和拒绝

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

### 实例

    function showError(error)
      {
      switch(error.code)
        {
        case error.PERMISSION_DENIED:
          x.innerHTML="User denied the request for Geolocation."
          break;
        case error.POSITION_UNAVAILABLE:
          x.innerHTML="Location information is unavailable."
          break;
        case error.TIMEOUT:
          x.innerHTML="The request to get user location timed out."
          break;
        case error.UNKNOWN_ERROR:
          x.innerHTML="An unknown error occurred."
          break;
        }
      }

亲自试一试

错误代码：

- Permission denied - 用户不允许地理定位
- Position unavailable - 无法获取当前位置
- Timeout - 操作超时

## 在地图中显示结果

如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图：

### 实例

    function showPosition(position)
    {
    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
    }

亲自试一试

在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。

谷歌地图脚本

上面的链接向您演示如何使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

## 给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过，地理定位对于给定位置的信息同样很有用处。

案例：

- 更新本地信息
- 显示用户周围的兴趣点
- 交互式车载导航系统 (GPS)

## getCurrentPosition() 方法 - 返回数据

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 | 描述
--- | ---
coords.latitude | 十进制数的纬度
coords.longitude | 十进制数的经度
coords.accuracy | 位置精度
coords.altitude | 海拔，海平面以上以米计
coords.altitudeAccuracy | 位置的海拔精度
coords.heading | 方向，从正北开始以度计
coords.speed | 速度，以米/每秒计
timestamp | 响应的日期/时间

## Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

### 实例

    <script>
    var x=document.getElementById("demo");
    function getLocation()
      {
      if (navigator.geolocation)
        {
        navigator.geolocation.watchPosition(showPosition);
        }
      else{x.innerHTML="Geolocation is not supported by this browser.";}
      }
    function showPosition(position)
      {
      x.innerHTML="Latitude: " + position.coords.latitude +
      "<br />Longitude: " + position.coords.longitude;
      }
    </script>

亲自试一试

- HTML 视频
- HTML5 拖放