HTML5 Geolocation 地理定位

前言

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

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

1、实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>
    </head>
    <body>
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>

    <script>
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
    x.innerHTML = "该浏览器不支持获取地理位置。";
    }
    }

    function showPosition(position) {
    x.innerHTML = "纬度: " + position.coords.latitude +
    "<br>经度: " + position.coords.longitude;
    }

    function showError(error) {
    switch (error.code) {
    case error.PERMISSION_DENIED:
    x.innerHTML = "用户拒绝对获取地理位置的请求。"
    break;
    case error.POSITION_UNAVAILABLE:
    x.innerHTML = "位置信息是不可用的。"
    break;
    case error.TIMEOUT:
    x.innerHTML = "请求用户地理位置超时。"
    break;
    case error.UNKNOWN_ERROR:
    x.innerHTML = "未知错误。"
    break;
    }
    }
    </script>
    </body>
    </html>
  • 效果

      

  • 解释

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

2、获取位置数据

  • 获取位置数据函数

    1
    getCurrentPosition(successCallback, errorCallback, PositionOptions);
参数 描述
successCallback 表示获取到的用户位置数据
errorCallback 返回的错误代码
PositionOptions 参数

2.1 successCallback 获取到的用户位置数据

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

  • successCallback 属性

属性 描述
coords 位置
address 地址
timestamp 响应的日期/时间
  • coords 定位
描述
accuracy 位置精度
latitude 十进制数的纬度
longitude 十进制数的经度
altitude 海拔,海平面以上以米计
altitudeAcuracy 位置的海拔精度
heading 方向,从正北开始以度计
speed 速度,以米/每秒计
  • address 位置
描述
country 国家
province 省份
city 城市
district 区/县
street
streetNum 路编号
poiName 地点名称
cityCode 城市代码

2.2 errorCallback 错误和拒绝处理

  • errorCallback 属性
属性 描述
message 错误信息
code 错误代码
  • code 错误代码
描述
unknow_error 表示不包括在其他错误代码中的错误,可以在 message 中查找信息
permission_denied 表示用户拒绝浏览器获取位置信息的请求
position unavalablf 表示网络不可用或者连接不到卫星
timeout 表示获取超时时。必须在 options 中指定了 timeout 值时才有可能发生这种错误

2.3 PositionOptions 参数

  • PositionOptions 属性
属性 描述
enableHighAcuracy 布尔值,表示是否启用高精确度模式,如果启用这个模式,浏览器在获取位置信息时可能需要耗费更多的时间
Timeout 整数,表示浏览器需要在指定的时间内获取位置信息,否则触发 errorCallback
maximumAge 整数/常量,表示浏览器重新获取位置信息的时间间隔

3、在地图中显示结果

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>
    <div id="mapholder"></div>

    <script>
    var x = document.getElementById("demo");
    function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
    x.innerHTML = "该浏览器不支持获取地理位置。";
    }
    }

    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 + "'>";
    }

    function showError(error) {
    switch (error.code) {
    case error.PERMISSION_DENIED:
    x.innerHTML = "用户拒绝对获取地理位置的请求。"
    break;
    case error.POSITION_UNAVAILABLE:
    x.innerHTML = "位置信息是不可用的。"
    break;
    case error.TIMEOUT:
    x.innerHTML = "请求用户地理位置超时。"
    break;
    case error.UNKNOWN_ERROR:
    x.innerHTML = "未知错误。"
    break;
    }
    }
    </script>
  • 使用脚本来显示带有标记、缩放和拖曳选项的交互式地图。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>
    <div id="mapholder"></div>

    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <script>
    var x = document.getElementById("demo");
    function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
    x.innerHTML = "该浏览器不支持获取地理位置。";
    }
    }

    function showPosition(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat, lon)
    mapholder = document.getElementById('mapholder')
    mapholder.style.height = '250px';
    mapholder.style.width = '500px';

    var myOptions = {
    center: latlon, zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    };
    var map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
    var marker = new google.maps.Marker({ position: latlon, map: map, title: "You are here!" });
    }

    function showError(error) {
    switch (error.code) {
    case error.PERMISSION_DENIED:
    x.innerHTML = "用户拒绝对获取地理位置的请求。"
    break;
    case error.POSITION_UNAVAILABLE:
    x.innerHTML = "位置信息是不可用的。"
    break;
    case error.TIMEOUT:
    x.innerHTML = "请求用户地理位置超时。"
    break;
    case error.UNKNOWN_ERROR:
    x.innerHTML = "未知错误。"
    break;
    }
    }
    </script>

4、watchPosition 方法

  • watchPosition():返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

  • clearWatch():停止 watchPosition() 方法

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>

    <script>
    var x = document.getElementById("demo");

    function getLocation() {
    if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
    } else {
    x.innerHTML = "该浏览器不支持获取地理位置。";
    }
    }

    function showPosition(position) {
    x.innerHTML = "纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude;
    }
    </script>

5、浏览器支持

  • Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 Geolocation(地理定位)。

  • 注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

6、百度获取经纬度

  • 百度获取经纬度的例子,各浏览器适用,含 IE5。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <!-- 引入百度 API,"ak=" 后面一串码是密钥,最好自己申请 -->
    <script type="text/javascript"
    src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
    </head>
    <body>
    <p id="demo">点击按钮获取您当前坐标(可能需要比较长的时间获取):</p>
    <button onclick="getLocation()">点我</button>

    <script type="text/javascript">
    var x = document.getElementById('demo');

    function getLocation() {
    var geolocation = new BMap.Geolocation(); // 创建百度地理位置实例,代替 navigator.geolocation
    geolocation.getCurrentPosition(function (e) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) { // 百度 geolocation 的经纬度属性不同,此处是 point.lat 而不是 coords.latitude
    x.innerHTML = '纬度:' + e.point.lat + '<br />经度:' + e.point.lng;
    } else {
    x.innerHTML = 'failed' + this.getStatus();
    }
    });
    }
    </script>
    </body>
    </html>
  • 效果

      

文章目录
  1. 1. 前言
  2. 2. 1、实例
  3. 3. 2、获取位置数据
    1. 3.1. 2.1 successCallback 获取到的用户位置数据
    2. 3.2. 2.2 errorCallback 错误和拒绝处理
    3. 3.3. 2.3 PositionOptions 参数
  4. 4. 3、在地图中显示结果
  5. 5. 4、watchPosition 方法
  6. 6. 5、浏览器支持
  7. 7. 6、百度获取经纬度
隐藏目录