HTML5 Geolocation位置信息定位总结

  现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息。HTML5 Geolocation仅仅是用来检索定位信息的API,至于底层是如何定位的他也不知道,他就相当于一个传信的,你说是1,ok,那我就给用户传个1,仅此而已。

  1).位置信息来源的分类和特点

    1.IP定位

    优点:任何地方都可以。

       在服务器端处理。

    缺点:不准确,只能精确到市级。

    2.GPS定位

    优点:比较准确。

    缺点:定位时间长。

       室内效果不好。

       需要硬件设备支持。

    3.Wi-Fi定位

    优点:精确。

       简单快捷。

       可在室内定位。

    缺点:适合大城市,对于乡村无接入点的地区几乎用不了。

    4.手机定位

    优点:非常精确。

       可在室内使用。  

       简单快捷。

    缺点:在没有基站的地方几乎用不了。

    5.自定义定位

    优点:可以获取比程序定位服务更准确的位置数据。

       允许地理定位服务的结果作为备用位置信息。

       用户自行输入可能比自动检测更快。

    缺点:可能不准确,特别是当用户的位置改变的时候。

  2)Geolocation AIP的使用

    1.检测浏览器的支持性。

    在HTML5中,通过window.navigator对象下新增geolocation属性来判断浏览器的兼容性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function geolocationSupport()
    {
        if(!navigator.geolocation)
        {
            alert(‘当前浏览器不支持HTML5 Geolocation‘)
        }
        else
        {
            alert(‘当前浏览器支持HTML5 Geolocation‘)
        }
    }
    geolocationSupport();
</script>
</body>
</html>

    2.获取当前地理位置

    我们使用getCurrentPosition(success(position),error(err),options)方法来获取当前用户的地理位置。

    success(position)回调函数是在获取到地理信息时调用的,其中的position参数是一个对象包括: latitude(纬度)

                                               longitude(经度)

                                               altitude(海拔高度)

                                               accuracy(纬度和经度的精度,以米为单位)

                                               latitudeAccuracy(海拔高度的精度,以米为单位)

                                               heading(设备的前进方向),speed(设备的前进速度以单位m/s)

                                               timestamp(获取位置的时间)。

    error(err)回电函数是在获取地理位置失败时调用的,其中err参数有俩个属性:code和message,code{1:表示用户拒绝了定位服务,2:获取不到位置信息,3:获取信息超时错误},message是字符串,表示错误信息。

    opations是一些可选属性的列表包括: enableHighAccuracy(是否要求高精度的地理位置信息),值为true或false。

                     timeout(对地理信息获取操作做一个超时限制,如果超时,则返回错误),值为数字,单位为毫秒。

                     maximumAge(对地理位置信息进行缓存的有效时间做一个限制),值为数字,单位为毫秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function geolocationSupport()
    {
        if(!navigator.geolocation)
        {
            alert("你的浏览器不支持HTML5 Geolocation");
        }
        else
        {
            getCurrentPosition();
        }
    }
    function getCurrentPosition(){
        var options={
            enableHighAccuracy:true,
            timeout:60000,
            maximumAge:60000
        }
        navigator.geolocation.getCurrentPosition(success,error,options)
    }
    function success(position)
    {
        var x=position.coords.longitude;
        var y=position.coords.latitude;
        alert("经度为:"+x+"纬度为:"+y);
    }
    function error(err)
    {
        var errorTypes={
            1:"用户拒绝定位服务",
            2:"获取不到定位信息",
            3:"获取定位信息超时"
        }
        alert(errorTypes[err.code]);
    }
    window.onload=geolocationSupport();
</script>
</body>
</html>

下面给大家分享一个在PC端可以显示定位地图的代码:

<!DOCTYPE html>
<html>
<title>HTML5调用百度地图API进行地理定位实例</title>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>
</head>
<body style="margin:50px 10px;">
<div id="status" style="text-align: center"></div>
<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>
</body>
</html>

<script type="text/javascript">

    window.onload = function() {
        var x,y;
        if(navigator.geolocation) {
            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
            // 百度地图API功能
            var map = new BMap.Map("container");
            var point = new BMap.Point(x,y);
            map.centerAndZoom(point,12);
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }
                else {
                    alert(‘failed‘+this.getStatus());
                }
            },{enableHighAccuracy: true})
            return;
        }
    };
</script>

最后再说一下watchPosition和clearPosition,用于地理位置监听和清除监听,watchPosition的用法和getCurrentPosition相同,而且watchPosition与clearPosition的关系和setInterval与clearInterval一样的用法,所以不多说了。

时间: 2024-10-11 04:29:00

HTML5 Geolocation位置信息定位总结的相关文章

HTML5+规范:Geolocation(管理设备位置信息) 定位

Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息. 1.方法 1.1.getCurrentPosition: 获取当前设备位置信息 void plus.geolocation.getCurrentPosition( successCB, errorCB, option ); 说明:位

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

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

HTML5学习笔记 Geolocation(地理定位)

HTML5 Geolocation(地理定位)用于定位用户的位置. 定位用户的位置 html5 Geolocation API用于获得用户的地理位置 鉴于该特性可能低侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML5 -使用地理定位 请使用getCurrentPositon()方法来获得用户的位置 下例是一个简单的地理定位的实例,可返回用户位置的纬度和纬度 直接上代码吧: <script> var x=document.getElementById("demo&q

HTML5+规范:Geolocation(管理设备位置信息)

Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息. 1.方法 1.1.getCurrentPosition: 获取当前设备位置信息 void plus.geolocation.getCurrentPosition( successCB, errorCB, option ); 说明:位

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获取地理位置信息(转)

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

Geolocation API JavaScript访问用户的当前位置信息

Geolocation API在浏览器中的实现是navigator.geolocation对象,常用的有以下方法. 1.第一个方法是getCurrentPosition() 调用这个方法就会触发请求用户共享地理定位信息的对话框.比如在火狐中的对话框: 这个方法接收3个参数:成功回调函数.可选的失败回调函数和可选的选项对象. ①成功回调函数会接收一个Position对象参数,有两个属性:coords和timestamp. coords对象中包含下列与位置相关的信息. latitude,十进制纬度

iOS定位和位置信息获取

要实现地图.导航功能,往往需要先熟悉定位功能,在iOS中通过Core Location框架进行定位操作.Core Location自身可以单独使用,和地图开发框架MapKit完全是独立的,但是往往地图开发要配合定位框架使用.在Core Location中主要包含了定位.地理编码(包括反编码)功能. 定位是一个很常用的功能,如一些地图软件打开之后如果用户允许软件定位的话,那么打开软件后就会自动锁定到当前位置,如果用户手机移动那么当前位置也会跟随着变化.要实现这个功能需要使用Core Loactio