【js学习笔记-115】----html5之地理位置

地理位置

地理位置API(http://www.3w.org/TR/geolocation-API/)允许js程序向浏览器询问用户真实的地理位置。识别地理位置的一些应用就可以使用它来显示地图、导航和其他一些和用户当前位置相关的信息。当然考虑这些信息牵涉用户隐私，支持地理位置API的浏览器在js程序获取用户物理位置前总是会询问用户是否允许。

支持地理位置API的浏览器会定义navigator.geolocation。此属性指代一个拥有如下这三个方法的对象：

navigatior.geolocation.getCurrentPosition();

//获取用户当前位置

navigatior.geolocation.watchPosition();

//获取当前位置，同时不断地监视当前位置，一旦用户位置发生更改，就会调用指定的回调函数

navigatior.geolocation.clearWatch();

//停止监视用户位置。传递给此方法的参数应当调用watchPosition()方法获得的返回值。

 

在包含GPS硬件的设备上，通过GPS单元可以获取精确的位置信息。不过，绝大多数情况下，位置信息都是通过Web获取的。当浏览器提交Internet ip地址给一个web服务器时，该服务器通常能够知道该ip属于哪个城市。浏览器还可能过请求操作系统获取附近元素网络列表和它们的信号强度，来得到更加精确的位置信息。当将这些信息提交给高级的web服务的时候，允许非常精确地计算位置。因为是异步的所以getCurrentPosition()和watchPosition()需要接受一个回调函数作为参数，在判断用户的位置信息时，浏览器会调用该函数。如下一个获取位置的简单例子：

navigator.geolocation.getCurrentPosition(function(pos){

    var latiude = pos.coords.latitude;

    var longitude = pos.coords.longitude;

    alert("Yourposition:"+latiude+", "+longitude);

});

 

除了经度和纬度外，凡是成功获取到的地理位置信息还包括一个精度值（米为单位），该值表示获取到位置信息精度是多。

例：通过获取地理位置信息在地图上显示当前位置

//返回一个新创建的<img>元素，该元素用于在获取到地理位置信息后，显示一张google地图

//该地图上显示了当前位置，要注意的是，此函数的调用者必须要将返回的元素

//如果当前浏览器不支持地理位置API，则抛出一个错误。

function getmap(){

    if(!navigator.geolocation)throw"Geolocation not supported";

    //创建一个新的<img>元素，并开始请求地理位置信息

    //img元素显示包含当前位置的地图，然后再将返回该图

    var image =document.createElement("img");

   navigator.geolocation.getCurrentPosition(setMapURL);

    return image;

 

    //从参数对象（pos）中获取位置信息

    function setMapURL(pos){

        var latitude = pos.coords.latitude; //经度

        var longitude = pos.coords.longitude;//纬度

        var accuracy = pos.coords.accuracy; //米

 

        //构造一个URL，用于请求一张显示当前位置的静态Google地图

        var url ="http://maps.google.com/maps/api/staticamp?center="+latitude+","+longitude+"&size=640x640&sensor=true";

        //设置一个大致的缩放级别

        var zoomlevel = 20;

       if(accuracy>80)zoomlevel-=Math.round(Math.log(accuracy/50)/Math.LN2);

        url+="&zoom"+zoomlevel;

        image.src = url;

 

    }

}

navigator.geolocation.getCurrentPosition(function(pos){

    var latiude = pos.coords.latitude;

    var longitude = pos.coords.longitude;

    alert("Yourposition:"+latiude+", "+longitude);

});

 

除了经度和纬度外，凡是成功获取到的地理位置信息还包括一个精度值（米为单位），该值表示获取到位置信息精度是多。

例：通过获取地理位置信息在地图上显示当前位置

//返回一个新创建的<img>元素，该元素用于在获取到地理位置信息后，显示一张google地图

//该地图上显示了当前位置，要注意的是，此函数的调用者必须要将返回的元素

//如果当前浏览器不支持地理位置API，则抛出一个错误。

function getmap(){

    if(!navigator.geolocation)throw"Geolocation not supported";

    //创建一个新的<img>元素，并开始请求地理位置信息

    //img元素显示包含当前位置的地图，然后再将返回该图

    var image =document.createElement("img");

   navigator.geolocation.getCurrentPosition(setMapURL);

    return image;

 

    //从参数对象（pos）中获取位置信息

    function setMapURL(pos){

        var latitude = pos.coords.latitude; //经度

        var longitude = pos.coords.longitude;//纬度

        var accuracy = pos.coords.accuracy; //米

 

        //构造一个URL，用于请求一张显示当前位置的静态Google地图

        var url ="http://maps.google.com/maps/api/staticamp?center="+latitude+","+longitude+"&size=640x640&sensor=true";

        //设置一个大致的缩放级别

        var zoomlevel = 20;

       if(accuracy>80)zoomlevel-=Math.round(Math.log(accuracy/50)/Math.LN2);

        url+="&zoom"+zoomlevel;

        image.src = url;

 

    }

}

 

地理位置API还有如下一些特性，

l  除了第一个回调函数的参数之外，getCurrentPosition()方法和watchPosition()方法还接受第二个可选的回调函数，当获取地理位置信息失败的时候，会调用该回调函数

l  除了成功和失败情况下的回调函数这两个参数之外，这两个方法还接受一个配置对象作为可选的第三个参数。该对象的属性指定了是否需要高精度的位置信息，该位置信息的过期时间，以及允许系统在多长时间内获取位置信息。

l  作为参数传递给成功情况下的回调函数的对象，还包含一个时间戳，也有可能包含诸如海拔、速度和航向之类的额外信息。

 

 

例：展示如何使用所有地理位置位置特性

function whereami(elt){

   var options = {

       enableHighAccuracy:false,

       maximumAge:300000,

       timeout:15000

   };

   if(navigator.geolocation)

          navigator.geolocation.getCurrentPosition(success,error,options);

   else

         elt.innerHTML = "Geolocation not supported in this browser";

 

   function error(e){

       //1 用户不允许分享位置信息

       //2 浏览器无法确定位置

       //3 发生超时

       elt.innerHTML = "Geolocation error "+ e.code+":"+e.message;

    }

   function success(pos){

       var msg ="At "+

           new Date(pos.timestamp).toLocaleDateString()+" you werewithin"+

           pos.coords.accuracy+" meters of latitude"+

           pos.coords.latitude+ "longitude"+

           pos.coords.longitude+" .";

 

         if(pos.coords.altitude){

              msg+="You are"+pos.coords.altitude+""+pos.coords.altitudeAccuracy+"metersabove sea level. ";

         }

 

         if(pos.coords.speed){

              msg+="You are travelling at"+

                  pos.coords.speed+"m/s onheading"+

                  pos.coords.heading+'.';

         }

       elt.innerHTML = msg;

    }

 

}