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

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

获取地理位置的原理

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

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

通过卫星定位获得经纬度信息的 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;  }}

登录后复制

在此列出了四种错误情况

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

位置信息不可用。

请求地理位置信息超时。

未知错误。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2909046.html

(0)
上一篇 2025年3月11日 03:18:57
下一篇 2025年3月11日 03:19:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html5需要遵守的6个原则(介绍)

    使得html5得以快速推广一系列原则是什么?本章给大家介绍html5需要遵守的6个原则。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 原则一:避免不必要的复杂性 html4 立即学习“前端免费学习笔记(深入)”; nbs…

    编程技术 2025年3月11日
    200
  • 移动端HTML5模拟长按删除事件(附代码)

    本篇文章给大家带来的内容是关于移动端html5模拟长按删除事件(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 为啥写这篇文章 最近接了个需求,要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常…

    2025年3月11日
    200
  • html5 canvas的绘制文本自动换行的示例代码

    在使用 canvas 绘制某字符串的时候,我们可能想要让该字符串在某处按要求换行。那么应该如何实现,本文就来介绍一下,有兴趣的可以了解一下。 本文介绍怎么解决canvas绘图过程中,drawText的换行问题,先看一个大家平时在canvas…

    2025年3月11日
    200
  • html5使用canvas压缩图片的示例代码

    这篇文章主要介绍了html5使用canvas压缩图片的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。 前俩天做了一个图片转base64上传的功能,发现如果图片的base64过大的话,请求会变的很慢,严重的直接超时了…

    编程技术 2025年3月11日
    200
  • html5 figure和figcaption的使用方法

    这篇文章主要介绍了html5 figure和figcaption的使用方法的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 figure标签和figcaption标签是html5新增的语义化标签。 figure标…

    2025年3月11日
    200
  • 用canvas画心电图的示例代码

    这篇文章主要介绍了用canvas画心电图的示例代码的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 本文介绍了用canvas画心电图的示例代码,分享给大家,具体如下: 效果图: 思路: 1.模拟点(如果你有真实的…

    2025年3月11日
    200
  • Html5 canvas实现粒子时钟的示例代码

    这篇文章主要介绍了html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实现, 首先要创建一个html文件并添加一…

    2025年3月11日
    200
  • canvas离屏技术与放大镜实现代码示例

    这篇文章主要介绍了canvas离屏技术与放大镜实现代码示例的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 利用 canvas 除了可以实现滤镜,还可以利用 离屏技术 放大镜功能。 为了方便讲解,本文分为 2 个…

    2025年3月11日
    200
  • Html5 video 上传预览图片视频,设置、预览视频某秒的海报帧

    这篇文章主要介绍了html5 video 上传预览图片视频,设置、预览视频某秒的海报帧的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 本文介绍了Html5 video 上传预览图片视频,设置、预览视频某秒的海报…

    2025年3月11日
    200
  • HTML5 input新增type属性color颜色拾取器的实例代码

    type 属性规定 input 元素的类型。本文较详细的给大家介绍了html5 input新增type属性color颜色拾取器的实例代码,感兴趣的朋友跟随脚本之家小编一起看看吧 定义和用法 type 属性规定 input 元素的类型。 注释…

    2025年3月11日
    200

发表回复

登录后才能评论