• 技术文章 >web前端 >H5教程

    如何使用HTML5实现地理位置的获取

    坏嘻嘻坏嘻嘻2018-09-26 11:50:20原创1787
    现在的移动端大部分都带有GPS定位功能,一方面可以利用基站获取位置,另一方面可以用GPS芯片精确定位,那么我们在前端开发的过程中,如何在用户同意分享地理位置的情况下获取精确的定位信息呢?本文向大家展示如何使用HTML5实现地理位置的获取,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    获取地理位置的原理

    大部分的设备分享地理位置需要用户权限,那么设备是怎么识别地理位置的呢?大致有如下两种方式:

    1. 通过移动端的IP地址进行定位(包括WiFi,CDMA等)。

    2. 通过卫星定位获得经纬度信息的 GPS 设备。

    首先我们需要设置调用函数来申请获取权限,然后利用回调函数获取地理位置信息,最后对于输出结果我们要进行容错处理。

    获取地理位置的步骤

    步骤一:调用位置函数

    function get_location() {
      navigator.geolocation.getCurrentPosition(show_map, handle_error, PositionOptions);
    }

    步骤二:获取地理位置

    function show_map(position) {
      var latitude = position.coords.latitude;//获取纬度
      var longitude = position.coords.longitude;//获取经度
    }

    其中这个回调函数要传入一个 position 对象,就是获取到的位置信息。position属性如图所示


    微信截图_20180926104216.png

    步骤三:容错处理

    function handle_error(err) {
      switch(err.code)  {
        case err.PERMISSION_DENIED:
          break;
        case err.POSITION_UNAVAILABLE:
          break;
        case err.TIMEOUT:
          break;
        case err.UNKNOWN_ERROR:
          break;
      }
    }

    在此列出了四种错误情况

    1. 用户拒绝对获取地理位置的请求。

    2. 位置信息不可用。

    3. 请求地理位置信息超时。

    4. 未知错误。

    以上就是如何使用HTML5实现地理位置的获取的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:地理定位 HTML5
    上一篇:html5利用canvas实现图片转素描效果 下一篇:canvas渐变色:canvas如何实现渐变色的效果?
    PHP编程就业班

    相关文章推荐

    • HTML5地理定位API接口开发• 基于ip的手机地理定位• html5之使用地理定位的代码分享• HTML5地理定位实例讲解• h5怎样实现获取用户地理定位

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网