HTML5 Geolocation

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

geography 地理； location 位置; Geo+location 地理位置； current 现在；

getCurrentPosition() 方法 - 返回数据

T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

HTML5 - 使用地理定位

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Geolocation</title>

</head>

<body>

	<button onclick="getLocation()">点击获取地理位置</button>

	<p>数据信息：</p>

	<p id="demo"></p>

	<script>

		var x=document.getElementById("demo");

		function getLocation()

		{

                        //检测是否支持地理定位

			if (navigator.geolocation)

			{

				navigator.geolocation.getCurrentPosition(updatPos,errorLoca);

			}

			else

			{

				x.innerHTML="该浏览器不支持获取地理位置。";

			}

		}

		//处理数据并显示

		function updatPos(position){

	            var latitude = position.coords.latitude;//十进制单位

	            var longitude = position.coords.longitude;//十进制单位

	            var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距

	            var timestamp = position.timestamp;//时间戳

 		    var date = new Date(timestamp);//时间格式

	            console.log('经度坐标' + latitude.toFixed(2)); //保留两位小数

	            console.log('纬度坐标' + longitude.toFixed(2));

	            console.log('准确度' + accuracy);

	            console.log('获取位置数据的时间' + date);

	            x.innerHTML = "纬度: " + latitude.toFixed(2) + "<br>经度: " + longitude.toFixed(2);

   		}

		function errorLoca(error){

	    	    var str = "";

	    	    switch(error.code){

	    		case 0:

	    		str ='位置信息获取失败，失败原因'+error.message;break;

                    case 1://错误编码 PERMISSION_DENIED

                    str ='用户拒绝共享其位置信息';break;

                    case 2://错误编码 POSITION_UNAVAILABLE

                    str = '尝试获取用户位置数据，但失败了' ;break;

                    case 3://错误编码 TIMEOUT

                    str = '尝试获取用户的位置数据超时' ;break;

                }

                console.log(str);

                console.warn('ERROR(' + error.code + '): ' + error.message);

                x.innerHTML = str;

            }

	</script>

</body>

</html>

实例解析:

  • 检测是否支持地理定位
  • 如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  • 如果getCurrentPosition()运行成功，则向参数updatPos中规定的函数返回一个position参数
  • 如果getCurrentPosition()运行失败，则向参数errorLoca中规定的函数返回一个error参数
  • updatPos() 函数获得并显示经度和纬度
  • errorLoca() 函数提示错误信息

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例（比如 iPhone）：

实例

var x=document.getElementById("demo");

function getLocation()

{

    if (navigator.geolocation)

    {

        navigator.geolocation.watchPosition(showPosition);

    }

    else

    {

        x.innerHTML="该浏览器不支持获取地理位置。";

    }

}

function updatPos(position)

{

    x.innerHTML="纬度: " + position.coords.latitude +

    "<br>经度: " + position.coords.longitude;

}

遇到问题以及解决方案

本机运行代码时，默认启动Chrome浏览器，每次点击获取地理位置按钮时，反应很慢需要等待许久。

得到报错如下图：

通过查阅资料了解到失败的几种原因。

Chrome控制台提示的错误：Network location provider at 'https://www.googleapis.com/' : No response received.

Chrome浏览器接入的定位服务在国外，有较大的限制，也会造成定位失败，且失败率较高。

换成系统自带的IE浏览器，完美运行

再尝试使用火狐浏览器运行，也成功定位

定位出现失败的原因

1. 第一种情况

浏览器不支持原生定位接口，如IE较低版本的浏览器，message字段包含Browser not Support html5 geolocation信息。

2. 第二种情况

用户禁用了定位权限，需要用户开启定位权限，message字段包含Geolocation permission denied。

3. 第三种情况

浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已经陆续禁止，需要升级站点到HTTPS，message字段包含Geolocation permission denied信息。注意:Chrome不会禁止localhost域名HTTP协议下的定位。

4. 第四种情况

浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。某个别浏览器本身对定位接口的友好程度较弱，也会超时返回失败，message字段包含Geolocation time out信息。

5. 第五种情况

Chrome、Firefox以及一些套壳浏览器接入的定位服务在国外，有较大的限制，也会造成定位失败，且失败率较高。

HTML5（五）Geolocation的更多相关文章

  1. 使用html5的Geolocation API实现定位

    公司有个需求,需要获取用户的位置,所以看了下html5的Geolocation 这个新东西,发现挺好用的. <!DOCTYPE html> <html> <body> ...

  2. HTML5 中 Geolocation 获取地理位置的原理是什么？

    http://www.zhihu.com/question/20473051?sort=created geolocation的位置信息来源包括GPS.IP地址.RFID.WIFI和蓝牙的MAC地址. ...

  3. HTML5五种客户端离线存储方案

    最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及Fi ...

  4. 玩转html5(五)---月球绕着地球转，地球绕着太阳转（canvas实现，同样可以动哦）

    关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

  5. 开玩笑html5(五岁以下儿童)---绕地球月球，地球绕太阳运动（canvas实现，同样可以移动哦）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 速度的參数与真实速度有点差距.大家能够自行调整 <!DOCTYPE html> <html> <head> ...

  6. HTML5(五)——Canvas API

    什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...

  7. 基于 html5 geolocation来获取经纬度地址(copy)

    geolocation来获取经纬度地址 以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差.为了获取更加精确的位置,可以使用了html5的geo ...

  8. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  9. HTML5 Geolocation(地理位置)

    HTML5 Geolocation(地理位置).是用来定位用户的位置的. HTML5 Geolocation API 用于获得用户的地理位置,鉴于该特性可能侵犯用户的隐私权,除非用户同意,否则不能获取 ...

  10. 你必须知道的28个HTML5特征、窍门和技术

    注意:每周有那么几次,此列表会更新一些新的窍门,最终,本文会成为超级有用的资源.//zxx:丑话说在前头,我可没功夫更新,所以,即使到您女儿出嫁那天,本文还是28项内容 前端的发展如此之迅猛,一不留神 ...

随机推荐

  1. java实现第五届蓝桥杯等额本金

    等额本金 题目描述 小明从银行贷款3万元.约定分24个月,以等额本金方式还款. 这种还款方式就是把贷款额度等分到24个月.每个月除了要还固定的本金外,还要还贷款余额在一个月中产生的利息. 假设月利率是 ...

  2. PAT 旧键盘打字

    旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及坏掉的那些键,打出的结果文字会是怎样? 输入格式: 输入在 2 行中分别给出坏掉的那些键.以及应该输入 ...

  3. k8s学习-存储

    4.6.存储 4.6.1.ConfigMap 创建方式 文件夹/文件创建 mkdir dir cd dir cat > c1.properties <<EOF c1.name=c1 ...

  4. Python抽象类以及元类

    抽象基类: 继承的约束与协议 __doc__ = """ 抽象基类: 继承的约束与协议 # 抽象基类 --- 有点java的味道,也有点golang的味道,继承,协议,接 ...

  5. android-sdk-window的环境搭建以及appium简单录制脚本的使用

    大家好,今天给大家带来的是appium的环境搭建以及简单的录制脚本,自学的过程中入了不少坑,下面给大家开始分享! 使用Appium录制脚本必备三大金刚:Appium-desktop(至于为什么用这个, ...

  6. 宝塔面板如何有效的清除SSL证书以及缓存

    一:关闭SSL 我们先关闭SSL证书,这个大家都会的吧.如图: 二:证书夹 网站配置的证书夹,我们删除掉,如图: 三:寻找SSL证书路径 网站配置里有一路径我们看下:如下 ssl_certificat ...

  7. 不需重新编译php,安装postgresql扩展(pgsql和pdo_pgsql)

    为了不重新编译php,使用phpize工具进行追加. 1.下载phpX安装包 访问php官方下载页,找到自己对应的php版本:https://secure.php.net/downloads.php ...

  8. 增值税发票税控开票软件助手Excel、ERP、SAP导入开票接口进行批量开票操作手册

    写这遍文章的目的是方便以后个人使用,做个笔记记录. 首先我来说一下它是做什么用的,它的主要作用是把用户的开票数据,Excel数据.ERP 系统.SAP导入到增值税发票税控开票软件中,可用航信盘.百旺盘 ...

  9. 使用LaTeX输入矩阵

    当前各种文本编辑器支持的LaTeX数学公式库大多基于KaTeX,或者在Web中用MathJax的比较多,下面给出一种在Web中输入矩阵的例子 $$\left[ \begin{array}{cccc}a ...

  10. Redis系列（四）：数据结构String类型中基本操作命令和源码解析

    1.介绍 string类型本质上是char[]数组的封装  中文网:http://www.redis.cn/commands.html#string  2.常用命令 set 命令 set命令的时间复杂 ...