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

地理位置(Geolocation)是 HTML5 的重要特性之中的一个,提供了确定用户位置的功能,借助这个特性可以开发基于位置信息的应用。

今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

  在訪问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,假设您同意 Chrome 浏览器与站点共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,预计您所在的位置。

然后,浏览器会与请求使用您位置的站点共享您的位置。

  HTML5 Geolocation API 使用很easy,基本调用方式例如以下:

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为获取位置信息成功的回调函数,返回的数据中包括经纬度等信息。结合Google Map API 就可以在地图中显示当前用户的位置信息。例如以下:

locationSuccess: function(position){
    var coords = position.coords;
    var latlng = new google.maps.LatLng(
        // 维度
        coords.latitude,
        // 精度
        coords.longitude
    );
    var myOptions = {
        // 地图放大倍数
        zoom: 12,
        // 地图中心设为指定坐标点
        center: latlng,
        // 地图类型
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // 创建地图并输出到页面
    var myMap = new google.maps.Map(
        document.getElementById("map"),myOptions
    );
    // 创建标记
    var marker = new google.maps.Marker({
        // 标注指定的经纬度坐标点
        position: latlng,
        // 指定用于标注的地图
        map: myMap
    });
    //创建标注窗体
    var infowindow = new google.maps.InfoWindow({
        content:"您在这里<br/>纬度:"+
            coords.latitude+
            "<br/>经度:"+coords.longitude
    });
    //打开标注窗体
    infowindow.open(myMap,marker);
}

经过測试,Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的。预计都是用的同一个位置服务,数据例如以下:

而IE浏览器的和上面几款浏览器获取到的数据不一样。数据例如以下:

位置服务用于预计您所在位置的本地网络信息包含:有关可见 WiFi 接入点的信息(包含信号强度)、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的精确度和覆盖范围因位置不同而异。 

  总的来说。在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高,假设借助这个 HTML5 特性做一个城市天气预报是绰绰有余。但假设是做一个地图应用。那误差还是太大了。只是,假设是移动设备上的 HTML5 应用,能够通过设置 enableHighAcuracy 參数为 true,调用设备的 GPS 定位来获取高精度的地理位置信息。

时间: 2024-10-07 05:46:46

HTML5 地理位置定位(HTML5 Geolocation)原理及应用的相关文章

HTML5 地理位置定位API(3)

HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了html5获取地理定位的方法,分享给大家供大家参考.具体方法如下: html5 获取坐标代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> <meta

HTML5 地理位置定位(1)

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

HTML5 地理位置定位API(2)

HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Internet Explorer 9.0+ 手机支持情况: Android 2.0+iPhone 3.0+Opera Mobile 10.1+Symbian (S60 3rd & 5th generation)Blackberry OS 6Maemo 检测浏览器是否支持: if (navigator.geol

HTML5 地理位置定位API(4)

地理定位(geolocation)是最令人兴奋,而且得到了广泛支持的一个新API.通过这套API, JavaScript代码能够访问到用户的 当前位置信息.当然,访问之前必须得到用户的明确许可,即同意在页面共享其位置信息. 如果页面尝试访问其地理定位信息,浏览器就会显示一个对话框,请求用 户许可共享其位置信息. Geolocation API在浏览器中的实现是navigator.geolocation对象,这个对象包含3个方法.第一个是getCurrentPosition(), 调用这个方法就会

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

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

HTML5获取地理位置定位信息

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

Javascript学习总结 - html5实现定位地理位置

简述 最近在苦逼学习Javascript,并且是有任务需要去完成的,因此就有一个想法要总结记录一下自己的学习成果.这次的总结主题是html5实现定位地理位置的任务,结合原生的Javascript实现此功能. html5 什么是html5? 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改版本,2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成,命名为html5. HTML5草案的前身名为 Web Applications

基于浏览器的HTML5地理定位

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo,获取浏览器经纬度,并用腾讯地图(大家可以选择自己喜欢的地图)显示出来,实现的最终效果如下图所示: 一.检测浏览器是否支持: if (navigator.geolocation) { //console.log("浏览器支持!"); } else

html5的地理位置定位

html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是window.navigator下面的一个对象,该对象提供了实现地理位置定位的接口.要用该功能需先判断浏览器是否支持navigator.geolocation对象. navigator.geolocation.getCurrentPosition(success, error, options); su