html5 geolocation API

清单 1. 检查浏览器支持性
if (navigator.geolocation)

清单 2. 单次定位请求 API
void getCurrentPosition(updateLocation, optional handleLocationError, optional options);

清单 3. updateLocation() 函数使用示例
updateLocation() 函数是getCurrentPosition的必选参数,也是浏览器指明位置数据可用时应调用的函数。获取位置操作可能需要较长时间才能完成,用户不希望在检索位置时浏览器被锁定,这个参数就是异步收到实际位置信息后,进行数据处理的地方。它同时作为一个函数,只接受一个参数:位置对象 position。
function updateLocation(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var accuracy = position.coords.accuracy;

  document.getElementById(“纬度”).innerHTML = latitude;
  document.getElementById(“经度”).innerHTML = longitude;
  document.getElementById(“准确度”).innerHTML = accuracy + “米”;
}

清单 4. 使用错误处理函数
该 API 已经定义了所有需要处理的错误情况的错误编号。错误编号 code 设置在错误对象中,错误对象作为 error 参数传递给错误处理程序。这些错误编号有:
  UNKNOWN_ERROR (0):不包括在其它错误编号中的错误,需要通过 message 参数查找错误的详细信息。
  PERMISSION_DENIED (1):用户拒绝浏览器获得其位置信息。
  POSITION_UNVAILABLE (2):尝试获取用户信息失败。
  TIMEOUT (3):在 options 对象中设置了 timeout 值,尝试获取用户位置超时。

  function handleLocationError(error) {
    switch (error.code) {
      case 0:
        updateStatus(“尝试获取您的位置信息时发生错误:” + error.message);
        break;
      case 1:
        updateStatus(“用户拒绝了获取位置信息请求。”);
        break;
      case 2:
        updateStatus(“浏览器无法获取您的位置信息。”);
        break;
      case 3:
        updateStatus(“获取您位置信息超时。”);
        break;
    }
  }

清单 5. 包含 options 的更新位置请求
  navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError,{timeout: 10000});

可选参数 options 对象可以调整 HTML5 Geolocation 服务的数据收集方式。该对象有三个可选参数:
enableHighAccuracy:如果启动该参数,浏览器会启动 HTML5 Geolocation 服务的高精确度模式,这将导致机器花费更多的时间和资源来确定位置,应谨慎使用。默认值为 false;
timeout:单位为 ms,告诉浏览器获取当前位置信息所允许的最长时间。如果在这个时间段内未完成,就会调用错误处理程序。默认值为 Infinity,即无穷大(无限制);
maximumAge:以 ms 为单位,表示浏览器重新获取位置信息的时间间隔。默认值为 0,这意味着浏览器每次请求时必须立即重新计算位置。
使用可选参数 options 更新我们的位置请求,让其包含一个使用 JSON 对象表示的可选参数

清单 6. 重复性位置更新请求 API
void watchPosition(updateLocation, optional handleLocationError, optional options);

清单 7. watchPosition 和 clearWatch 的使用
关闭更新也很简单,如果应用程序不需要再接收用户的位置更新消息,只需要使用 clearWatch() 函数。参照清单 7 给的例子。
var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);
// 基于持续更新的位置信息实现一些功能…
// 停止接收位置更新消息
navigator.geolocation.clearWatch(watchId);

参考:使用 HTML5 Geolocation 构建基于地理位置的 Web 应用

   浏览器地理位置(Geolocation)API 简介

时间: 2024-10-13 18:38:18

html5 geolocation API的相关文章

HTML5 Geolocation API精确性[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出

关于HTML5 地理位置geolocation API 的一些事

大学毕业,到进入这个行业也已经有5个多月了,接触HTML5 Webapp开发也有5个多月了,趁着周末写一些关于在开发过程中使用HTML5 Geolocation API的一些心得. 一.浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位). 移动端:Android 2.0+,iPhone 3.0+,Opera Mobile 10.1+,Symbian,Blackberry OS 6,Maem

HTML5 地理位置定位(HTML5 Geolocation)原理及应用

地理位置(Geolocation)是 HTML5 的重要特性之中的一个,提供了确定用户位置的功能,借助这个特性可以开发基于位置信息的应用. 今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况. 在訪问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,假设您同意 Chrome 浏览器与站点共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,预计您所在的位置. 然后,浏览器会与请求使用您位置的站点共享您的位

html5 Geolocation(地理位置定位)学习

1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供给浏览器.位置信息一般包括经度和纬度信息! 经度和纬度坐标信息一般由两种方式表示 a.十进制表示:39.17222 b.DMS角度格式表示:39°10'20" 2.位置从哪里来 html5 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户,相反,它只是用于检索位置信息的A

HTML5 Geolocation 构建基于地理位置的 Web 应用

HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到来更大地促进了 Web 的发展,HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 video 和 audio 元素 用于定位的 Geolocation

HTML5 Geolocation(地理定位)用于定位用户的位置。

定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位. 注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确. HTML5 - 使用地理定位 请使用 getCurrentPosition() 方法来获得用户的位置. 下例是一个简单的地理定位实例,可返

HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是cookie有下面几个问题: a:大小:cookies的大小被限制在4KB b:带宽:cookies随HTTP事务一起被发送,因此会浪费一部分发送的cookies时使用的带宽. c:复杂性:要正确的操纵cookies是很困难的. Web Storage分为两种: <1>sessionStorage 将数

地理位置(Geolocation)API 简介

一.开篇简述 Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法.且目前看来浏览器的支持情况还算不错(因为新版本的IE支持了该API),这使得在不久之后就可以使用这一浏览器内置的API了.该API接口提供的用户地理位置信息还算蛮详细的,经纬度啊,海拔啊,精确度,移动速度啊都是可以获取的. 据我个人的了解,其位置的获取是通过收集用户周围的无线热点和您 PC 的 IP 地址.然后浏览器把这些信息发送给默认的位置定位服务提供者,也就是谷歌位置服务,由它

HTML5 Geolocation实用性小调查

原文及代码请戳 http://appnext.mybluemix.net/Tracker.html 详细说明 本文中的代码来源于developWorkds上的这篇文章.不过,如果你仔细阅读过原文中的代码,就会发现其中有2处错误.一处是致命的错误导致距离计算结果变成NaN,另一处使得计算结果显示不正确.不过这两处已在此处的代码中修复了,有兴趣的同学可以比较一下源代码看看错误到底出在哪里.另外,本页面中的代码显示了Position对象中,HTML5定义的所有值,并且加入了一个计时器计算显示定位所耗时