HTML 5中地理位置api小结

阅读更多

  HTML 5提供了地理位置等一系列API可以给用户使用，方便用户制作LBS的地理应用，首先在支持HTML 5的浏览器中，当开启API时，会询问是否用户同意使用api，否则不会开启的，保证安全。


1） 开启，判断是否浏览器支持LBS api

 function isGeolocationAPIAvailable()
 {

   var location = "No, Geolocation is not supported by this browser." ;
   if  (window.navigator.geolocation) {
     location = "Yes, Geolocation is supported by this browser." ;
   }
   alert(location);
 }

   上面的例子中，还在displayError方法中，捕捉了异常；

2 获得用户的地理位置：

    这个使用getCurrentPosition就可以了；

 function requestPosition() {
 if  (nav ==  null ) {
 nav = window.navigator;
 }
 if  (nav !=  null ) {
 var geoloc = nav.geolocation;
 if  (geoloc !=  null ) {
 geoloc.getCurrentPosition(successCallback);
 }
 else  {
 alert("Geolocation API is not supported in your browser" );
 }
 }
 else  {
 alert("Navigator is not found" );
 }
 }

   当获得地理位置成功后，会产生一个回调方法了，处理返回的结果，

  

 function setLocation(val, e) {
   document.getElementById(e).value = val;
 }

 function successCallback(position)
 {
   setLocation(position.coords.latitude, "latitude" );   setLocation(position.coords.longitude,  "longitude" );
 }

 



3）
一个很常见的问题，是如何跟踪用户不断变化的地理位置，这里小结下其中用到的两个api。

1 watchPosition

   例子如下：

 

 function listenForPositionUpdates() {
     if  (nav ==  null ) {
         nav = window.navigator;
     }
     if  (nav !=  null ) {
         var geoloc = nav.geolocation;
         if  (geoloc !=  null ) {
             watchID = geoloc.watchPosition(successCallback);
         } else  {
             alert("Geolocation API is not supported in your browser" );
         }
     } else  {
         alert("Navigator is not found" );
     }
 }

   然后在successCallback中，就可以设置显示最新的地理位置：

 

 function successCallback(position){
   setText(position.coords.latitude, "latitude" );   setText(position.coords.longitude,  "longitude" );
 }

   如果不希望实时跟踪，则可以取消之：

  function clearWatch(watchID) { 
  window.navigator.geolocation.clearWatch(watchID);

}

4） 如何处理异常：
    当遇到异常时，可以捕捉之：

 

 if  (geoloc !=  null ) {
    geoloc.getCurrentPosition(successCallback, errorCallback);
     }

 function errorCallback(error) {
     var message = "" ;
     switch  (error.code) {
     case  error.PERMISSION_DENIED:
         message = "This website does not have permission to use "
                 + "the Geolocation API" ;
         break ;
     case  error.POSITION_UNAVAILABLE:
         message = "The current position could not be determined." ;
         break ;
     case  error.PERMISSION_DENIED_TIMEOUT:
         message = "The current position could not be determined "
                 + "within the specified timeout period." ;
         break ;
     }
     if  (message ==  "" ) {
         var strErrorCode = error.code.toString();
         message = "The position could not be determined due to "
                 + "an unknown error (Code: "  + strErrorCode +  ")." ;
     }
     alert(message);
 }

  
5) 在google 地图上显示位置（前提是有google map api等设置好）

  

 function getCurrentLocation()
   {
   if  (navigator.geolocation)
     {
     navigator.geolocation.getCurrentPosition(showMyPosition,showError);
     }
   else
    {
     alert("No, Geolocation API is not supported by this browser." );
     }
  }

   function showMyPosition(position)
 {
 var coordinates=position.coords.latitude+"," +position.coords.longitude;
 var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
 +coordinates+"&zoom=14&size=300x300&sensor=false" ;
 document.getElementById("googlemap" ).innerHTML= " +map_url+ "' />" ;
 }

  function showError(error)
  {
   switch (error.code)
   {
   case  error.PERMISSION_DENIED:
   alert("This website does not have permission to use the Geolocation API" )
   break ;

   case  error.POSITION_UNAVAILABLE:
   alert("The current position could not be determined." )
   break ;

   case  error.TIMEOUT:
   alert("The current position could not be determined within the specified time  out period." )
   break ;

   case  error.UNKNOWN_ERROR:
   alert("The position could not be determined due to an unknown error." )
   break ;
   }
  }