地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。
HTML5 Geolocation API 使用非常简单,基本调用方式如下:
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{ // 指示浏览器获取高精度的位置,默认为false enableHighAcuracy: true, // 指定获取地理位置的超时时间,默认不限时,单位为毫秒 timeout: 5000, // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。 maximumAge: 3000 }); }else{ alert("Your browser does not support Geolocation!"); }
locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:
locationError: function(error){ switch(error.code) { case error.TIMEOUT: showError("A timeout occured! Please try again!"); break; case error.POSITION_UNAVAILABLE: showError('We can\'t detect your location. Sorry!'); break; case error.PERMISSION_DENIED: showError('Please allow geolocation access for this to work.'); break; case error.UNKNOWN_ERROR: showError('An unknown error occured!'); break; } }
locationSuccess为获取位置信息成功的回调函数,返回的数据中包含经纬度等信息。
locationSuccess: function(position){ var coords = position.coords; // 维度 alert(coords.latitude); // 精度 alert( coords.longitude); }
Geolocation 对象 - 其他的方法
watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
clearWatch() - 停止 watchPosition() 方法
watchPosition和clearWatch()是一对方法,起原理和setTimeout方法相同。watchPosition方法会返回一个唯一的标识,clearWatch可通过这个唯一标识清除watchPosition方法的监听。
watchPosition的语法和getCurrentPosition相同,可以传递3个参数分别为:
1.监听成功后返回的函数
2.监听失败返回的函数
3.可选参数
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
自己使用的例子
function getLocation() { if (window.navigator.geolocation) { var options = { enableHighAccuracy : true, }; window.navigator.geolocation.getCurrentPosition(function(position) { var lng = position.coords.longitude; var lat = position.coords.latitude; getXq(lng, lat); }, function(error) { getXq('116.307852', '40.057031'); }, options); } else { alert("浏览器不支持html5来获取地理位置信息"); } }
相关推荐
geolocation地理定位
如何使用Win8系统中GeoLocation地理定位功能.docx
HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位用户的位置。...注意: Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。 HTML5 – 使用地理定位 请使用 ge
第7章 GEOLOCATION地理定位 第8章 轻量级框架JQUERY MOBILE初探 第9章 重量级富框架SENCHA TOUCH入门 第10章 跨平台的PHONEGAP应用介绍 第11章 构建基于HTML5的生活轨迹WEB APP 第12章 进阶之路
rn-background-geolocation-demo, 针对本机背景地理定位插件的演示应用程序 [Demo App ] react-native-background-geolocation全功能,反应本机演示应用程序的反应本地背景地理定位模块。 安装$ git clone ...
个人出行:用户个人出行,不确定路程、目的地等信息,选择出行工具,点击开始,系统实时监听用户手机位置得到WGS84经纬度坐标(w3c HTML5 Geolocation地理定位标准),行程结束,记录本次出行信息,经纬度坐标转换...
如果浏览器不支持地理定位,则让页面向用户显示反馈消息。 如果支持地理定位,则尝试获取用户的当前位置,然后加载包含地图中心标记的 google STATIC 地图。 HTML5 地理定位 作为 HTML 演变的一部分而提供的新 API...
Truly revolutionary: now you can write geolocation applications directly in the browser, rather than develop native apps for particular devices. This concise book demonstrates the W3C Geolocation API ...
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理位置定位API使用教程.
12【深入学习】HTML5.Geolocation地理定位视频教程(英语) ===2:书籍教程资料 + 源代码=== 01《HTML5高级程序设计》完整PDF版本(含范例及代码)独家.zip 02《HTML5揭秘》高清PDF版本——(中英双语版)独家.zip ...
kirby-geolocation-field, Kirby 2地理定位面板 2的地理定位这是一个定制的 Kirby域,它添加了一个带有拖拽标记的googlemaps 。 将标记位置保存到输入字段。 地理编码器用于搜索地址项。安装下载文件并将它们放在名...
主要介绍了Html5 Geolocation获取地理位置信息实例,具有一定的参考价值,有兴趣的同学可以了解一下。
第7章 Geolocation地理定位 74 第8章 轻量级框架jQuery Mobile初探 79 第9章 重量级富框架Sencha Touch入门 187 第10章 跨平台的PhoneGap应用介绍 273 第11章 构建基于HTML5的生活轨迹Web App 337 第12章 进阶之路 ...
geolocation.js 简介 - 在不支持 HTML5 地理定位的浏览器中可用。 位置信息在上提供。 怎样申请 < script type =" text/javascript " src =" http://j.maxmind.com/app/geoip.js " > </ script >< ...
插件为路由和控制器提供属性以获取地理位置信息(例如坐标)。 安装 npm install --save-dev ember-cli-geolocation ember generate ember-cli-geolocation 用法 作为 mixin 可用,您可以这样使用: import ...
MapNav-Geolocation Toolkit 1.5.0 插件为最新版。是Unity 地理定位功能开发的必选插件。功能包括2D/3D对象地理定位,GPS导航和在线地图。只要你厉害,试试用这个开发个自己的轻量级 “高德地图”的App。
本小菜刚开始学习HTML5,现在对其中的Geolocation颇感兴趣,结合Google Map的API实现基本的地图定位功能主要是由以下几个步骤:获取当前地理位置、调用Google Map API获取当前位置信息
用于本机地理定位的Polyfill(但未提供官方的地理定位)。 当前,仅实现了getCurrentPosition方法。 任何愿意为其余方法做出贡献的人都是很高兴的。 将其添加到您的react-native android项目的步骤: npm ...