地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。

HTML5 Geolocation API 使用非常简单，基本调用方式如下：　

if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{

        // 指示浏览器获取高精度的位置，默认为false

        enableHighAccuracy: 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 定位来获取高精度的地理位置信息。

转自：http://www.cnblogs.com/lhb25/archive/2012/07/10/html5-geolocation-api-demo.html

demo谷歌：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <title>Geolocation谷歌</title>

    <style type="text/css">

        body, html,#map {

            width: 100%;

            height: 100%;

            overflow: hidden;

            margin:0;

            font-family:"微软雅黑";

        }

    </style>

    <script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=密钥" type="text/javascript"></script>

    <script>

        if (navigator.geolocation) {

            navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{

                // 指示浏览器获取高精度的位置，默认为false

                enableHighAccuracy: true,

                // 指定获取地理位置的超时时间，默认不限时，单位为毫秒

                timeout: 5000,

                // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。

                maximumAge: 3000

            });

        }else{

            alert("Your browser does not support Geolocation!");

        }

        function locationError(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;

            }

        };

        function locationSuccess(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);

        };

        function showError(txt){  // 报错信息

            console.log(txt);

        }

    </script>

</head>

<body>

    <div id="map"></div>

</body>

</html>

demo百度和原生H5：

<!DOCTYPE html>

<html>

<title>Geolocation和百度地图API进行地理定位实例</title>

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

        <style>

            body, html,#container {

                width: 100%;

                height: 100%;

                overflow: hidden;

                margin:0;

                font-family:"微软雅黑";

            }

        </style>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>

    </head>    

    <body>

        <div id="status" style="text-align: center"></div>

        <div id="container"></div>

    </body>    

</html>    

<script type="text/javascript">

    //默认地理位置设置为上海市浦东新区

    var x = 121.48789949,y = 31.24916171;

    var tip = document.getElementById("status");

    window.onload = function() {

        if(navigator.geolocation) {

            // navigator有3个方法:clearWatch、getCurrentPosition、watchPosition

            navigator.geolocation.getCurrentPosition(showPosition);

            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";

                // 百度地图API功能

                var map = new BMap.Map("container"); // 创建Map实例

                var point = new BMap.Point(x,y); // 设置中心点坐标

                map.centerAndZoom(point,12); // 初始化地图,设置中心点坐标和地图级别、

                map.addControl(new BMap.MapTypeControl()); // 添加地图类型控件

                map.setCurrentCity("上海"); // 设置地图显示的城市,此项是必须设置的

                map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

                var geolocation = new BMap.Geolocation(); // geolocation 有2个方法:getCurrentPosition、getStatus

                geolocation.getCurrentPosition(

                    function(r){ // 成功的回调

                        console.log("通过百度地图定位");

                        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()); // 此处的this指代 geolocation

                        }

                    },

                    function(error){ // 失败的回调

                        switch(error.code) {

                            case error.TIMEOUT:

                                tip.innerHTML = "A timeout occured! Please try again!发生超时！请重试！";

                                break;

                            case error.POSITION_UNAVAILABLE:

                                tip.innerHTML = 'We can\'t detect your location. Sorry!我们无法探测到你的位置,对不起！';

                                break;

                            case error.PERMISSION_DENIED:

                                tip.innerHTML = 'Please allow geolocation access for this to work.请允许访问地理位置';

                                break;

                            case error.UNKNOWN_ERROR:

                                tip.innerHTML = 'An unknown error occured!发生未知错误！';

                                break;

                        }

                    },{

                    // 指示浏览器获取高精度的位置，默认为false

                    enableHighAccuracy: true,

                    // 指定获取地理位置的超时时间，默认不限时，单位为毫秒

                    timeout: 5000,

                    // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。

                    maximumAge: 3000

                })

            return;

        }

        alert("你的浏览器不支持获取地理位置！");

    };    

    function showPosition(position){  // 成功的回调

        console.log("通过原生H5的geolocation定位");

        x = position.coords.latitude; // 维度

        y = position.coords.longitude; // 经度

    };

</script>

Geolocation地理定位的更多相关文章

  1. Geolocation 地理定位

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  3. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  4. JS新API标准 地理定位（navigator.geolocation）/////////zzzzzzzzzzz

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  5. JS新API标准 地理定位（navigator.geolocation）

    在新的API标准中,可以通过navigator.geolocation来获取设备的当前位置,返回一个位置对象,用户可以从这个对象中得到一些经纬度的相关信息. navigator.geolocation ...

  6. Xamarin Essentials教程地理定位Geolocation

    Xamarin Essentials教程地理定位Geolocation   通过地理定位功能,应用程序可以获取用户的当前地理位置,如经纬度值.利用地理位置,可以在地图上定位,也可以转化物理位置,划分用 ...

  7. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

  8. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  9. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

随机推荐

  1. NandFlash_control

    驱动:编写任何设备的驱动程序,都需要对该设备的原理有一定了解和认识.对于外部设备的访问总是需要通过一个控制器来间接访问,对于这个控制器的控制程序称为驱动程序 Nandflash 原理: 一:角色分析 ...

  2. Python Django 中的STATIC_URL 设置和使用解析

    使用Django静态设置时,遇到很多问题,经过艰苦的Baidu, stack overflow, Django原档阅读,终于把静态图片给搞出来了.特记录下来. 关键的概念:Django中,静态资源的存 ...

  3. mysql数据库外键删除更新规则

    1.CASCADE:从父表删除或更新且自动删除或更新子表中匹配的行. 2.SET NULL:从父表删除或更新行,并设置子表中的外键列为NULL.如果使用该选项,必须保证子表列没有指定NOT NULL. ...

  4. 维护直线的线段树：Bzoj1568，Bzoj3938(Uoj88)

    有这样一类线段树,可以维护一些直线方程并对每个点求出最大值. 首先先看BZOJ1568,输入给你条直线的方程,你需要对于指定的位置求出最大的函数值. 看到数据范围nlog^2n可做,考虑用线段树去维护 ...

  5. uoj407 【IOI2018】狼人

    link 题意: 给一张n个点m条边的无向图,有q个询问,每次询问给出s,t,l,r,问你能否从s走到t,并且初始为人形,结束时必须为狼形,你是人形的时候必须避开$[1,l)$的节点,狼形的时候必须避 ...

  6. Java中的Runnable、Callable、Future、FutureTask的区别

    本文转载自:http://blog.csdn.net/bboyfeiyu/article/details/24851847 Runnable 其中Runnable应该是我们最熟悉的接口,它只有一个ru ...

  7. python开发_tkinter_图片操作

    在java的swing中,我们可以找到一些有关图片的操作,对于python的tkinter类似,也有对于图片的相关操作 下面是我做的demo 运行效果: ======================= ...

  8. wikioi 1434 孪生素数 水题、素数模版

    1434 孪生素数 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 白银 Silver 题目描述 Description 输出100以内的所有相差6的孪生素数:如, 5 11 7 13 ...

  9. Spring Batch 批处理框架介绍

    前言 在大型的企业应用中,或多或少都会存在大量的任务需要处理,如邮件批量通知所有将要过期的会员,日终更新订单信息等.而在批量处理任务的过程中,又需要注意很多细节,如任务异常.性能瓶颈等等.那么,使用一 ...

  10. spring @Transactional注解无效

    <!-- 配置事务管理器 --> <bean id="transactionManager" class="org.springframework.jd ...