Html5 系列之：地理位置Geolocation

简介：Geolocation API用于将用户当前地理位置信息共享给信任的站点，当一个站点要获取用户的当前地理位置，需要通过浏览器请求用户授权。和Geolocation类似的google有个插件Gears，它通过插件安装的方式支持所有浏览器，不过目前google弃用它了。

这里我们讨论的是Geolocation,我们来看看如何使用。

一、检测浏览器是否支持：

if(!navigator.geolocation){
   alert("您的浏览器不支持Geolocation");
   return;
}

我们也可以通过Modernizr检测，“Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.”

if(Modernizr.geolocation){    
    //let's find out where you are!    
} else {    
    // no native geolocation support available    
    // maybe try Gears or another third-party solution    
}

二、调用Geolocation API存在于navigator对象中，包含3个方法：

1、getCurrentPositionnavigator.geolocation.getCurrentPosition(success_callback, error_callback, {geolocation选项});第一个参数是用户允许浏览器共享geolocation成功后的回调方法第二个参数是用获取地理位置信息失败的处理方法，传入错误对象，包含code、message两个属性第三个参数都是geolocation选项，所有的geolocation选项都是可选的，它包含的属性如下：

interface PositionOptions {
    attribute boolean enableHighAccuracy;
    attribute long timeout;
    attribute long maximumAge;
  };

enableHighAccuracy(Boolean型，默认为false，是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量)timeout(单位为毫秒，默认值为0，在放弃并触发处理程序之前，可以等待的时间----用户选择期间是不计时的)maximumAge(单位为毫秒，默认值为0。用来告诉浏览器是否使用最近缓存的位置数据，如果在maximumAge内有一个请求，将会返回它，而不请求新位置。maximumAge如果为Infinity，则总是使用一个缓存的位置，如果为0则必须在每次请求时查找一个新位置)

2、watchPosition用来跟踪不断变化的地理位置信息，可以设置间隔多少时间获取一次位置，和clearWatch一起使用。

3、clearWatch用来清除Position信息。

   function success_callback(position) {
      // Scrolls the map so that it is centered at (position.coords.latitude, position.coords.longitude).
    }

    // Request repeated updates.
    var watchId = navigator.geolocation.watchPosition(success_callback, {geolocation选项});

    function buttonClickHandler() {
      // Cancel the updates when the user clicks a button.
      navigator.geolocation.clearWatch(watchId);
    }

请求授权访问位置信息

三、实例

if (navigator.geolocation) {  
       navigator.geolocation.getCurrentPosition(function(position) {  
		   var lat = position.coords.latitude;
		   var lon = position.coords.longitude;
                  document.getElementById('geo_loc').innerHTML = '您当前的位置，纬度：' + lat + '，经度：' + lon;  
		   //showonMap(lat,lon);
       }, function(err) {  
           document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message;  
       });

   } else {  
       document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";  
   }

成功后回调获取用户位置数据position，它包含两个属性：coords、timestamp。coords属性有7个值，包含上面用到的纬度、经度。1、accuracy 准确角2、altitude 海拔高度3、altitudeAcuracy 海拔高度的精确度4、heading 行进方向5、speed 地面的速度

四、在地图上显示

if (navigator.geolocation) {  
       navigator.geolocation.getCurrentPosition(function(position) {  
		   var lat = position.coords.latitude;
		   var lon = position.coords.longitude;
           document.getElementById('geo_loc').innerHTML = '您当前的位置，纬度：' + lat + '，经度：' + lon;  
		   showonMap(lat,lon);
       }, function(err) {  
           document.getElementById('geo_loc').innerHTML = err.code + "\n" + err.message;  
       });

   } else {  
       document.getElementById('geo_loc').innerHTML = "您当前使用的浏览器不支持Geolocation服务";  
   }  
    function showonMap(lat,lon){
		var latlng = new google.maps.LatLng(lat, lon);
		var mapOptions = {
			zoom: 13,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center:latlng
		};
		map = new google.maps.Map(document.getElementById("map"), mapOptions);
		var marker = new google.maps.Marker({  
		  position: latlng,   
		  map: map,   
		  title:'您当前的位置' 
		});  
	}