HTML5地理位置笔记

地理位置信息概述

地理位置信息的内容

浏览器的“位置信息”是指安装浏览器的硬件设备的位置信息，主要指设备当前地理位置的纬度(latitude)与当前地理位置的经度(longitude)信息。

在这里插入图片描述

地理位置元信息的来源

IP地址
GPS
移动电话基站或无线Wi-Fi
用户输入

地理位置信息使用

确定用户在Web应用中需要使用地理信息，例如，用户的地理位置、当前位置的海拔、移动方向等。
调用Geolocation API，执行地理位置方法调用，得到需要的位置数据，如果使用地图，还需要使用Google的地图API、百度地图API、Bing
地图API等。
浏览器解析用户的Geolocation API调用，并提示用户是否允许调用位置信息。
浏览器检索运行Web应用设备的信息，得到括地理位置信息的元数据。
为Web应用提供基于位置的服务，例如Web页面根据当前的位置设置显示的语言、从数据库中读取当前位置的天气信息、测试位置移动距和离速度等。

地理位置API

HTML5的Geolocation API 包括3个方法：getCurrentPosition()、watchPosition()、clearWatch()。

getCurrentPosition()方法

getCurrentPosition()用来获取用户当前位置的地理信息。

void getCurrentPosition(onSuccess,onError,options);

参数说明

第1个参数onSuccess：该参数是获取地理位置信息成功时的回调函数句柄。
第2个参数onError：可选参数，是获取地理位置信息失败时的回调函数句柄。
第3个参数options：可选参数，用来提供一个options对象给地理定位服务，通过一些可选属性的列表来指定搜集数据的选项，例如设置等候超时的时间。

watchPosition()方法

用来持续获取用户的地理位置信息，它会定期地自动获取。

int watchPosition (onSuccess,onError,options);

该方法三个参数的含义与getCurrentPosition方法的参数说明与使用方法相同。

watchPosition()方法有返回值，该值可以当作参数传递给clearWatch()方法，以取消追踪，从clearWatch()方法的格式可以看出来。

clearWatch()方法定义：

void clearWatch(wacthId)

获取地理位置信息的应用

使用getCurrentPosition()方法获取地理位置信息的实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取详细地理位置信息</title>
    <script>
        var loc;
        // 页面加载完成时onload()方法调用
        function init() {
            loc = document.getElementById("location");
            time = document.getElementById("time");
        }
        //  单击按钮时调用该方法
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                loc.innerHTML = "您的浏览器不支持HTML5地理位置.";
            }
        }
        // getCurrentPosition方法调用成功时调用该方法
        function showPosition(position) {
            loc.innerHTML = "纬度: " + position.coords.latitude + "<br/>" +
            "经度: " + position.coords.longitude + "<br/>" +
            "海拔: " + position.coords.altitude + " 米<b/r>" +
            "精度: " + position.coords.accuracy + " 米<br/>" +
            "海拔精度: " + position.coords.altitudeAccuracy + " 米<br/>" +
            "速度: " + position.coords.speed + " 米/秒<br/>";
            // 转换 timestamp为可阅读格式
            var d = new Date(position.timestamp);
            time.innerHTML = d.toLocaleDateString() + "  " + d.toLocaleTimeString();
        }
    </script>
</head>
<body onLoad="init();">
<p id="location">单击按钮获取你的位置:</p>
<p id="time"></p>
<button onClick="getLocation()">获取地理位置信息</button>
</body>
</html>

在这里插入图片描述

在getCurrentPosition()方法中进行错误处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>错误处理</title>
    <script>
        var loc;
        function init() {
            loc = document.getElementById("location");
        }
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                loc.innerHTML = "你的浏览器不支持html5地理位置.";
            }
        }
        // 当getCurrentPosition方法调用成功时调用该方法
        function showPosition(position) {
            loc.innerHTML = "Latitude: " + position.coords.latitude +
            "<br>Longitude: " + position.coords.longitude;
        }
        // 当getCurrentPosition调用失败时调用该方法
        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    loc.innerHTML = "用户拒绝地理位置请求."
                    break;
                case error.POSITION_UNAVAILABLE:
                    loc.innerHTML = "位置信息不可用."
                    break;
                case error.TIMEOUT:
                    loc.innerHTML = "获取位置信息请求超时."
                    break;
                case error.UNKNOWN_ERROR:
                    loc.innerHTML = "一个未知错误发生."
                    break;
            }
        }
    </script>
</head>
<body onLoad="init();">
<p id="location">单击你的按钮获取你的位置:</p>
<button onClick="getLocation()">获取地理位置信息</button>
</body>
</html>

在这里插入图片描述

在静态地图显示用户位置

申请百度地图密钥

网址：http://lbsyun.baidu.com/apiconsole/key

在这里插入图片描述

<!DOCTYPE html>    
<html>    
<title></title>    
   <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
 <script type="text/javascript">
  var x = 111.248024， y = 21.910679;
  window.onload = function() {
   if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
    document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
    // 百度地图API功能    
    var map = new BMap.Map("container");
    var point = new BMap.Point(x, y);
    map.centerAndZoom(point, 12);
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r) {
     if(this.getStatus() == BMAP_STATUS_SUCCESS) {
      var mk = new BMap.Marker(r.point);
      map.addOverlay(mk);
      map.panTo(r.point);
     } else {
      alert('failed' + this.getStatus());
     }
    }, {
     enableHighAccuracy: true
    })
    return;
   }
   alert("你的浏览器不支持获取地理位置！");
  };
  function showPosition(position) {
   x = position.coords.latitude;
   y = position.coords.longitude;
  }
 </script>
    </head>    
    <body style="margin:50px 10px;">    
        <div id="status" style="text-align: center"></div>    
        <div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>    
    </body>    
</html>

在这里插入图片描述

使用 watchPosition()查看位置改变信息

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body onLoad="init();">
<script>
    var loc;
    var counter = 0;
    var watchId;
    function init() {
        loc = document.getElementById("location");
    }
    function startWatch() {
        if (navigator.geolocation) {
            var options = {enableHighAccuracy: true, timeout: 2000};
            watchId = navigator.geolocation.watchPosition(showPosition, showError, options);
        } else {
            loc.innerHTML = "您的浏览器不支持html5地理位置.";
        }
    }
    function clearWatch() { 
        navigator.geolocation.clearWatch(watchId);
    }
    // 当getCurrentPosition方法调用成功时调用该方法
    function showPosition(position) {
        loc.innerHTML = "计数器: " + counter++ + "<br>" +
        "经度: " + position.coords.latitude + "<br>" +
        "纬度: " + position.coords.longitude;
    }
    // 当getCurrentPosition调用失败时调用该方法
    function showError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                loc.innerHTML = "用户拒绝地理位置请求."
                break;
            case error.POSITION_UNAVAILABLE:
                loc.innerHTML = "位置信息不可用."
                break;
            case error.TIMEOUT:
                loc.innerHTML = "获取位置信息请求超时."
                break;
            case error.UNKNOWN_ERROR:
                loc.innerHTML = "一个未知错误发生."
                break;
        }
    }
</script>
<p id="location">单击按钮获取你的位置:</p>
<button onClick="startWatch()">开始观察</button>
<button onClick="clearWatch()">停止观察</button>
</body>
</html>

在这里插入图片描述

YanHilin

发布了137 篇原创文章 · 获赞 26 · 访问量 3万+

私信关注