Html5 系列之:地理位置Geolocation
来源:互联网 发布:淘宝发布宝贝看不到 编辑:程序博客网 时间:2024/06/09 08:23
简介:Geolocation API用于将用户当前地理位置信息共享给信任的站点,当一个站点要获取用户的当前地理位置,需要通过浏览器请求用户授权。和Geolocation类似的google有个插件Gears,它通过插件安装的方式支持所有浏览器,不过目前google弃用它了。
这里我们讨论的是Geolocation,我们来看看如何使用。
一、检测浏览器是否支持:
if(!navigator.geolocation){ alert("您的浏览器不支持Geolocation"); return;}我们也可以通过Modernizr检测,“Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.”
if(Modernizr.geolocation){ //let's find out where you are! } else { // no native geolocation support available // maybe try Gears or another third-party solution }
二、调用Geolocation API存在于navigator对象中,包含3个方法:
1、getCurrentPositionnavigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});第一个参数是用户允许浏览器共享geolocation成功后的回调方法第二个参数是用获取地理位置信息失败的处理方法,传入错误对象,包含code、message两个属性第三个参数都是geolocation选项,所有的geolocation选项都是可选的,它包含的属性如下:
interface PositionOptions { attribute boolean enableHighAccuracy; attribute long timeout; attribute long maximumAge; };
enableHighAccuracy(Boolean型,默认为false,是否尝试更精确地读取纬度和经度,移动设备上,这可能要使用手机上的GPS,这会消耗移动设备更多的电量)timeout(单位为毫秒,默认值为0,在放弃并触发处理程序之前,可以等待的时间----用户选择期间是不计时的)maximumAge(单位为毫秒,默认值为0。用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。maximumAge如果为Infinity,则总是使用一个缓存的位置,如果为0则必须在每次请求时查找一个新位置)
2、watchPosition用来跟踪不断变化的地理位置信息,可以设置间隔多少时间获取一次位置,和clearWatch一起使用。
3、clearWatch用来清除Position信息。
function success_callback(position) { // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude). } // Request repeated updates. var watchId = navigator.geolocation.watchPosition(success_callback, {geolocation选项}); function buttonClickHandler() { // Cancel the updates when the user clicks a button. navigator.geolocation.clearWatch(watchId); }
请求授权访问位置信息
三、实例
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; document.getElementById('geo_loc').innerHTML = '您当前的位置,纬度:' + lat + ',经度:' + lon; //showonMap(lat,lon); }, function(err) { document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message; }); } else { document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务"; }
成功后回调获取用户位置数据position,它包含两个属性:coords、timestamp。coords属性有7个值,包含上面用到的纬度、经度。1、accuracy 准确角2、altitude 海拔高度3、altitudeAcuracy 海拔高度的精确度4、heading 行进方向5、speed 地面的速度
四、在地图上显示
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; document.getElementById('geo_loc').innerHTML = '您当前的位置,纬度:' + lat + ',经度:' + lon; showonMap(lat,lon); }, function(err) { document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message; }); } else { document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务"; } function showonMap(lat,lon){var latlng = new google.maps.LatLng(lat, lon);var mapOptions = {zoom: 13,mapTypeId: google.maps.MapTypeId.ROADMAP,center:latlng};map = new google.maps.Map(document.getElementById("map"), mapOptions);var marker = new google.maps.Marker({ position: latlng, map: map, title:'您当前的位置' }); }
- Html5 系列之:地理位置Geolocation
- HTML5 之Geolocation API (地理位置应用程序接口)
- HTML5 Geolocation 地理位置 - 6
- HTML5 Geolocation获取地理位置
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- HTML5地理位置定位 Geolocation API
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5 地理位置定位(HTML5 Geolocation)
- HTML5地理位置Geolocation以及百度地图应用
- HTML5 Geolocation API (地理位置应用程序接口)获取地理位置
- HTML5之Geolocation API
- Geolocation地理位置
- Geolocation地理位置
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- HTML5 地理位置定位(HTML5 Geolocation)原理及应用
- Html5 系列之:Canvas绘图
- SSIS 错误代码 没有可用的 OLE DB 访问接口 SSIS 的 64 位版本中不支持 Excel 连接管理器
- JS动态实现遮盖网页效果
- 轻松实现ImageButton带文字
- 手势——UIGestureRecognizer
- Html5 系列之:地理位置Geolocation
- 10G,11G恢复表的统计信息
- PHP插入法排序
- Html5 系列之:本地存储Storage
- Html5 系列之:桌面通知Notification
- 生成验证码
- 栈的定义和存储以及算法实现
- C/C++开发语言系列之16---C++不同类型数据间的转换
- NGUI v2.0 UI_2:UIAtlas UI图集类