html5获取地理位置信息API

在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位置的信息,该API可以应用在移动设备上的地理定位;为window.navigator 对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问。window.navigator对象中的geolocation属性有三个方法如下:

第一个方法是:getCurrentPosition 该方法来取得用户当前的地理位置信息,该方法定义如下:

getCurrentPosition(onSuccess,onError,options);

其中第一个参数为获取当前地理位置信息成功时所执行的回调函数:该方法使用如下:

navigator.geolocation.getCurrentPosition(function(position)) {
    // 获取成功时的的处理;
    //参数position是地理位置对象
}

第二个参数为获取当前地理位置信息失败的回调函数,如果获取地理位置信息失败,你可以通过该回调函数把错误信息提示给用户,该方法使用如下:

navigator.geolocation.getCurrentPosition(function(position){
     // 获取成功时的的处理;
    //参数position是地理位置对象
},function(error)) {
    // 获取失败时的的处理;
}

该回调函数使用一个error对象作为参数,该对象具有以下两个属性:

code属性: code属性有以下值:

用户拒绝了位置服务(属性值为1的情况下)。

获取不到位置信息(属性值为2的情况下)。

获取信息超时错误(属性值为3的情况下)。

message属性:message属性为一个字符串,在该字符串中包含了错误信息。

综合以上两个回调函数,我们可以编写如下代码:

navigator.geolocation.getCurrentPosition(function(position){
    var coords = position.coords;
   // 获取精度
   console.log(coords.longitude);
   // 获取纬度
   Console.log(coords.latitude);
   // 获取经度或者纬度的精度(以米为单位)
   Console.log(coords.accuracy);
},function(error){
    // 错误的回调函数
   Var errorTypes = {
      1: ‘位置服务被拒绝’,
      2: ‘获取不到位置信息’,
      3: ‘获取信息超时’
};
    alert(errorTypes[error.code]);
});

getCurrentPosition的第三个参数可以省略,是可选参数,这些可选属性如下:

enableHighAccuracy: 是否要求高精度的地理位置信息,这个参数在很多设备上设置了没有用,因为使用在设备上时需要结合设备电量,具体地理情况综合考虑,因此可以使用该属性默认值;

timeout:对地理位置信息的获取操作做一个超时限制(单位为毫秒),如果在该时间内未获取到地理位置信息,则返回错误;

maximumAge: 对地理位置进行缓存的有效时间(单位为毫秒).比如:maximumAge:120000(1分钟是60000),如果10点整的时候获取过一次地理位置信息,10:01的时候,再次调用navigator.geolocation.getCurrentPosition重新获取地理位置的信息,则返回的依然为10:00时的数据(因为设置的缓存有效时间为2分钟)。超过这个时间后缓存的地理位置信息被废弃;尝试重新获取地理位置信息;如果该值被指定为0,则无条件重新获取新的地理位置信息。

第二个方法是:watchPosition;该方法来持续监视当前地理位置的信息,它会定期地自动获取,该方法使用方法如下:

watchCurrentPosition(onSuccess,onError,options);

该方法的三个参数的含义与getCurrentPosition方法的参数相同;该方法返回一个数字,这个数字的使用方法与javascript脚本中的setInterval方法的返回的参数使用方法类似;可以使用clearWatch方法停止对当前地理位置信息的监视。如下

clearWatch(watchId);(停止获取当前用户的地理位置信息,这也是第三个方法);

我们接下来可以来了解下position对象的属性如下:

latitude:  当前地理位置的纬度;

longitude: 当前地理位置的经度;

altitude: 当前地理位置的海拨高度(不能获取为null)

accuracy: 获取到的纬度或者经度的精度(以米为单位);

altitudeAccurancy: 获取到的海拨高度的经度(以米为单位);

speed:设备的前进速度(以米/秒为单位,不能获取时为null)

timestamp: 获取地理位置信息时的时间。

下面我们来看下我现在公司的经度和纬度,代码如下:

function get_location() {
      if(navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function(position){
                 // 显示地理信息
                 var longitude = position.coords.longitude,
                     latitude = position.coords.latitude;
                 showObject(position.coords,0);
              },function(err){
                    // 错误处理
                    switch(err.code) {
                        case 1:
                            alert("位置服务被拒绝。");
                        break;

                        case 2:
                            alert("暂时获取不到位置信息。");
                        break;

                        case 3:
                            alert("获取信息超时。");
                        break;

                        default:
                            alert("未知错误。");
                        break;
                    }
                },{
                    enableHighAccuracy: true,
                    maximumAge: 100,
                    accuracy:100
                })
            }else {
                alert("你的浏览器不支持使用HTML5来获取地理位置信息");
            }
        }
        function showObject(obj,k) {
            // 递归显示obj
            if(!obj) {return;}
            for(var i in obj) {
                if(typeof(obj[i] != "object") || obj[i] == null) {
                    for(var j = 0; j < k; j++) {
                        document.write("&nbsp;&nbsp;&nbsp;&nbsp;")
                    }
                    document.write(i + " : " + obj[i] + "<br/>");
                }else {
                    document.write(i + " : "+"<br/>");
                    showObject(obj[i],k+1);
                }
            }
        }
get_location();

截图如下:

时间: 2024-12-16 02:47:38

html5获取地理位置信息API的相关文章

HTML5 获取地理位置信息

Geolocation API的基本知识 在HTML5中,为window.navigator对象新增了一个geolocation属性,可以使用Geolocation API来对该属性进行访问.window.navigator对象的geolocation属性存在三个方法. 取得当前地理位置 可以使用getCurrentPosition()方法来取得用户当前的地理位置信息,该方法的定义如下: Js代码 收藏代码 void getCurrentPosition(onSuccess, onError,

HTML5获取地理位置信息

<!DOCTYPE html> <html> <head> <title>Location</title> <meta charset="utf-8"> </head> <body> <input type="button" id="btnLocation" value="获取位置信息"> </body> &

Html5 Geolocation获取地理位置信息(转)

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地

地理位置信息API

首先研究window.navigater对象 window.navigator用来查询一些关于运行当前脚本的应用程序的相关信息.For example, 1 alert("You're using " + navigator.appVersion); 该段代码将查询返回当前浏览器的版本号.此外,navigator对象还有navigator.appName(返回浏览器的正式名称), navigator.cookieEnabled(返回布尔值表明浏览器是否启用cookies)等各种属性以及

通过window.navigator对象获取地理位置信息并在百度地图上显示

通过window.navigator对象获取地理位置信息 Geolocation API:用户可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services) window.navigator下的geolocation 对象的 getCurrentPosition 方法可以获取当前位置.getCurrentPosition 方法将发起对位置信息的异步请求并将立即返回.如果该请求成功完成,则调用用来实现位置数据接收的成功回调. 下面演示如何调用 getCur

Android 获取地理位置信息 封装好了 直接用

前言:花了一个早上研究了以下android获取经纬度,然后网上的参考资料都是杂七杂八,基本上都是过去几年的,现在我用 android6.0参照别人的结果发生好多错误,我的内心几乎是崩溃的.后来,不断百度,不断goole,不断查找资料,终于解决了,而且完美打包,以后直接用就可以了. 1.这个类原来是用kotlin写的,后来有些东西和java又不同,索性就改成java吧,反正他们兼容性很强-----封装的类名为:LocationUtil package com.example.jason_jan.g

微信小程序把玩(三十八)获取设备信息 API

原文:微信小程序把玩(三十八)获取设备信息 API 获取设备信息这里分为四种, 主要属性: 网络信息wx.getNetWorkType, 系统信息wx.getSystemInfo, 重力感应数据wx.onAccelerometerChange, 罗盘数据wx.onCompassChange wxml <button type="primary" bindtap="getNetWorkType">获取网络类型</button> <butt

[iOS]获取地理位置信息

1.在工程的 info.plist 文件中增加两个key( 右键 - Add Row ) Privacy - Location Always and When In Use Usage Description Privacy - Location When In Use Usage Description value里输入征求获取位置信息时展示的提示语: 2.在需要获取地理位置信息的文件中 #import <CoreLocation/CoreLocation.h> 在interfce行添加相关

HTML5获取地理位置定位信息

HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地图接口来获取用户准确的地理位置信息. 如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用户设备浏览器是否支持地理定位,如果支持则获取地理信息.注意这个