• Html5 Geolocation Api


    在HTML5中,window.navagator对象新增了一个geolocation属性,可以使用Geolocation API 来访问该属性.

    HTML5 Geolocation API的使用方法相当简单。请求一个位置信息,如果用户同意,浏览器就会返回信息,该信息是通过支持HTML5地理定位功能的底层设备提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成,有了这些位置信息就可以构建引人注目的位置感知类应用程序。

    HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法。

    在使用之前,首先要检测浏览器是否支持Geolocation,使用下面的方法检测。

    if(navigator.geolocation)

    getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:
    1、successCallback:成功获取用户位置信息后的回调函数
    2、errorCallback:获取用户位置信息失败时的回调函数
    3、positionOptions:可选。获取用户位置信息的配置参数

    i)、successCallback
    successCallback 函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值:
    1、accuracy:精确度
    2、latitude:纬度
    3、longitude:经度
    4、altitude:海拔
    5、altitudeAcuracy:海拔高度的精确度
    6、heading:朝向
    7、speed:

    ii)、errorCallback

    和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性:
    1、message:错误信息
    2、code:错误代码。
    其中错误代码包括以下四个值:
    0 — UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息
    1 — PERMISSION_DENIED:表示用户拒绝浏览器获取位置信息的请求
    2 — POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星
    3 — TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

    iii)、positionOptions
    positionOptions 的数据格式为JSON,有三个可选的属性:
    1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
    2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
    3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

    watchPosition()

    watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。

    另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数(setTimeout/setInterval)那样,返回一个 ID ,可以被清除掉。这里是用接下来介绍的 clearWatch 清除。

    clearWatch()

    接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。

    示例代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }

    </style>
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?&key=your_key&sensor=true_or_false">

    </script>

    <script type="text/javascript">

    window.onload = initialize();
    function initialize() {

    var options = {
    maximumAge:60*1000*2,
    timout:5000
    }

    navigator.geolocation.getCurrentPosition(showMap,showError,options);

    }

    function showMap(position){
    var coords = position.coords;

    var mapOptions = {
    center: new google.maps.LatLng(coords.latitude, coords.longitude),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);
    }

    function showError(error){

    var errorTypes = {

    1:'位置服务被拒绝',
    2:'获取不到位置信息',
    3:'获取信息超时'
    }

    alert(errorTypes[error.code] + ": 不能确定你的当前地理位置.")
    }
    </script>
    </head>
    <body>
    <div id="map_canvas" style="100%; height:100%"></div>
    </body>
    </html>

  • 相关阅读:
    XSS
    web安全之sql注入
    12、API
    7、源与值(Source/Values)
    3、高级方法(Advanced Recipes)
    树莓派实现SIM868 ppp拨号上网
    【转】在树莓派上实现人脸识别
    树莓派raspbian安装matchbox-keyboard虚拟键盘
    python+树莓派实现IoT(物联网)数据上传到服务器
    python安装MySQLclient
  • 原文地址:https://www.cnblogs.com/mguo/p/2893513.html
Copyright © 2020-2023  润新知