• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 如何使用HTML5实现地理位置的获取

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含地理定位,HTML5等相关知识,匿名希望在学习及工作中可以帮助到您
现在的移动端大部分都带有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实现地理位置的获取的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5地理定位与第三方工具百度地图的应用
  • HTML5获取地理位置信息
  • 如何使用HTML5实现地理位置的获取
  • HTML5怎样正确的使用HTML的地理定位?
  • 利用h5实现获取用户地理定位
  • HTML5地理定位与第三方工具百度地图的应用
  • HTML5地理定位实例讲解
  • html5之使用地理定位的代码分享
  • 详解HTML5地理定位与第三方工具百度地图的应用
  • H5之11__GeoLocation 地理定位

相关文章

  • 2017-08-06html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
  • 2018-12-03HTML5 history新特性pushState、replaceState及两者的区别 _html5教程技巧
  • 2018-12-03随机字符变换效果的jQuery插件开发教程
  • 2018-12-03举例详解HTML5中使用JSON格式提交表单_html5教程技巧
  • 2018-12-03JQuery $()用法总结
  • 2017-08-06一张图片能隐含千言万语之隐藏你的程序代码
  • 2017-08-06html5摇一摇代码优化包括DeviceMotionEvent等等
  • 2018-12-03phonegap本地存储详解
  • 2018-12-03 HTML5实现下雪效果的实例代码分享
  • 2017-08-06html5使用canvas绘制文字特效

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 canvas基本绘图之绘制矩形
    • HTML5新特性之WebSocket
    • HTML5在IE10、火狐下中文乱码问题的解决方法_html5教程技巧
    • HTML5中新标签和常用标签详解
    • 如何通过HTML5触摸事件实现移动端简易进度条
    • html5基础标签(html5视频标签 html5新标签用法)
    • HTML5实现页面切换激活的PageVisibility API使用初探
    • IE9下html5初试小刀 _html5教程技巧
    • HTML5对比HTML4的主要改变和改进总结
    • 有关手机页面的文章推荐10篇

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有