navigator.geolocation.getCurrentPosition(function(){
})
经度 : coords.longitude

纬度 : coords.latitude

准确度 : coords.accuracy

海拔 : coords.altitude

海拔准确度 : coords.altitudeAcuracy

行进方向 : coords.heading

地面速度 : coords.speed

请求的时间: new Date(position.timestamp)

获取方法代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * { margin: 0; padding: 0;}

    #box {

      width: 500px;

      height: 500px;

      border: 2px solid deeppink;

    }

  </style>

</head>

<body>

  <button id='btn'> 请求位置信息 </button>

  <div id="box"></div>

  <script>

    let btn = document.getElementById('btn');

    let box = document.getElementById('box');

    //点击按钮获取地理位置信息

    btn.onclick = function () {

      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取

      //直接navigator.geolocation表示单次获取位置

      navigator.geolocation.getCurrentPosition(function (position) {

        box.innerHTML += "经度" + position.coords.longitude;

        box.innerHTML += "纬度" + position.coords.latitude;

        box.innerHTML += "准确度" + position.coords.accuracy;

        box.innerHTML += "海拔" + position.coords.altitude;

        box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy;

        box.innerHTML += "行进方向" + position.coords.heading;

        box.innerHTML += "地面速度" + position.coords.speed;

        box.innerHTML += "请求的时间" + new Date(position.timestamp);

      }, function (err) {

        alert(err.code);

// code：返回获取位置的状态

//          0  :  不包括其他错误编号中的错误

// ​		     1  :  用户拒绝浏览器获取位置信息

// ​		     2  :  尝试获取用户信息，但失败了

// ​		     3  :   设置了timeout值，获取位置超时了

      }, {

          enableHighAcuracy: false, //位置是否精确获取

          timeout: 5000,            //获取位置允许的最长时间

          maximumAge: 1000          //多久更新获取一次位置

        })

    }

  </script>

</body>

</html>

　　

IE浏览器运行结果如下：

谷歌浏览器限制了获取

【H5】 经纬度位置获取navigator.geolocation.getCurrentPosition的更多相关文章

  1. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

  2. 完美解决window.navigator.geolocation.getCurrentPosition，在IOS10系统中无法定位问题

    目前由于许多用户都将电话升级到了iOS系统,苹果的iOS 10已经正式对外推送,相信很多用户已经更新到了最新的系统.然而,如果web站没有及时支持https协议的话,当很多用户在iOS 10下访问很多 ...

  3. IOS10 window.navigator.geolocation.getCurrentPosition 无法定位问题

    在iOS 10中,苹果对webkit定位权限进行了修改,所有定位请求的页面必须是https协议的. 如果是非https网页,在http协议下通过HTML5原生定位接口会返回错误,也就是无法正常定位到用 ...

  4. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

  5. 用navigator.geolocation.getCurrentPosition在IOS10以上的系统无法定位

    昨天老板告诉我代码有Bug(定位失败),于是各种测试最终发现IOS10以上版本手机不能成功(穷,买不起iphone,测试不完全),先贴失败代码: var city =""; nav ...

  6. navigator.geolocation.getCurrentPosition

    navigator.geolocation.getCurrentPosition Geolocation API Specification 2nd Edition W3C Recommendatio ...

  7. H5 Notes：Navigator Geolocation

    H5的地理位置API可以帮助我们来获取用户的地理位置,经纬度.海拔等,因此我们可以利用该API做天气应用.地图服务等. Geolocation对象是我们获取地理位置用到的对象. 首先判断浏览器是否支持 ...

  8. H5 移动端获取当前位置

    3种方法:1.H5自带的方法,获取经纬度2.通过地图提供的JS.获取位置3.通过微信的API(这个需要公众号 / 小程序) 1.通过H5自带的获取经纬度的方法 优点: 需要引用的资源较少,H5自带的方 ...

  9. 使用navigator.geolocation来获取用户的地理位置信息

    使用navigator.geolocation来获取用户的地理位置信息 W3C 中新添加了一个名为 Geolocation的 API 规范,Geoloaction API的作用就是通过浏览器获取用户的 ...

随机推荐

  1. 最新 游族网络java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.游族网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了游族网络.6.7月主要是做系统复习.项目复盘.Leet ...

  2. UIPath工具里面如何入力一览里面的数据

    问题描述: UIpath工具如何在网页里面入力一览多条的数据.例如:某个公司里面在自己的内部员工管理的软件里面手动入力公司员工的所有信息之后反馈到数据库当中. 解决方法: UIpath工具来入力数据, ...

  3. P4568 飞行路线【分层图最短路】

    题目链接:https://www.luogu.org/problem/P4568 题目大意:给定n个点,m条无向边,k次机会经过边时代价为 0 .给出起点和终点,求其最短路径. 解题思路: 两种方法, ...

  4. jmeter XLSX 读取

    import org.apache.poi.xssf.usermodel.XSSFWorkbook; import org.apache.poi.xssf.usermodel.XSSFSheet; i ...

  5. PAT甲级 并查集 相关题_C++题解

    并查集 PAT (Advanced Level) Practice 并查集 相关题 <算法笔记> 重点摘要 1034 Head of a Gang (30) 1107 Social Clu ...

  6. 【5号课堂】scratch制作电子生日贺卡

    贺卡在我国的使用由来已久,在古代,上层士大夫有用名帖互相问候的习俗 唐宋以后,贺卡的名称及功能有所进步,称为”门状“或“飞帖“,到了明清,又叫“红单“.“贺年帖“等等,听着名字就知功能越来越世俗化,文 ...

  7. 关于UBOOT,LINUX内核编译，根文件系统的15个小问题

    (1)内核默认运行地址和加载地址在哪里设置? 由 arch/arm/kernel/vmlinux.lds.S 生成的 arch/armkernel/vmlinux.lds决定   (2)从FLASH什 ...

  8. windows环境下 快速杀死占用端口的进程

    保存为bat脚本,设置需要解除占用的端口 port,点击运行即可 @echo off setlocal enabledelayedexpansion set prot = 8022 for /f &q ...

  9. POJ2729 Robocode（离散化与模拟-----提醒曾经爱玩游戏的自己没做出这个

    题目链接 :http://poj.org/problem?id=2729 题目很长,有不少也是废话.类似小时候玩的坦克大战.每个坦克速度为10,炮弹速度为20.子弹出界就消失,坦克出不了界限.相向的子 ...

  10. @PostConstruct注解原理解析

    所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 正文 @PostConstruct注解使用简介 在了解一个东西的原理之前,我们得初步的懂得如何 ...