HTML 5中地理位置api小结

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


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

Java代码  

1. function isGeolocationAPIAvailable()  
2. {  
3.   
4.   var location = "No, Geolocation is not supported by this browser." ;   
5.   if  (window.navigator.geolocation) {  
6.     location = "Yes, Geolocation is supported by this browser." ;  
7.   }  
8.   alert(location);  
9. }  

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

2 获得用户的地理位置：

    这个使用getCurrentPosition就可以了；

Java代码  

1. function requestPosition() {  
2. if  (nav ==  null ) {  
3. nav = window.navigator;  
4. }  
5. if  (nav !=  null ) {  
6. var geoloc = nav.geolocation;  
7. if  (geoloc !=  null ) {  
8. geoloc.getCurrentPosition(successCallback);  
9. }  
10. else  {  
11. alert("Geolocation API is not supported in your browser" );  
12. }  
13. }  
14. else  {  
15. alert("Navigator is not found" );  
16. }  
17. }  

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

  

Java代码  

1. function setLocation(val, e) {    
2.   document.getElementById(e).value = val;  
3. }   
4.     
5. function successCallback(position)  
6. {   
7.   setLocation(position.coords.latitude, "latitude" );   setLocation(position.coords.longitude,  "longitude" );  
8. }  

 



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

1 watchPosition

   例子如下：

 

Java代码  

1.        
2. function listenForPositionUpdates() {  
3.     if  (nav ==  null ) {  
4.         nav = window.navigator;  
5.     }  
6.     if  (nav !=  null ) {  
7.         var geoloc = nav.geolocation;  
8.         if  (geoloc !=  null ) {  
9.             watchID = geoloc.watchPosition(successCallback);  
10.         } else  {  
11.             alert("Geolocation API is not supported in your browser" );  
12.         }  
13.     } else  {  
14.         alert("Navigator is not found" );  
15.     }  
16. }  

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

 

Java代码  

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

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

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

}

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

 

Java代码  

1. if  (geoloc !=  null ) {     
2.    geoloc.getCurrentPosition(successCallback, errorCallback);    
3.     }  
4.   
5. function errorCallback(error) {  
6.     var message = "" ;  
7.     switch  (error.code) {  
8.     case  error.PERMISSION_DENIED:  
9.         message = "This website does not have permission to use "   
10.                 + "the Geolocation API" ;  
11.         break ;  
12.     case  error.POSITION_UNAVAILABLE:  
13.         message = "The current position could not be determined." ;  
14.         break ;  
15.     case  error.PERMISSION_DENIED_TIMEOUT:  
16.         message = "The current position could not be determined "   
17.                 + "within the specified timeout period." ;  
18.         break ;  
19.     }  
20.     if  (message ==  "" ) {  
21.         var strErrorCode = error.code.toString();  
22.         message = "The position could not be determined due to "   
23.                 + "an unknown error (Code: "  + strErrorCode +  ")." ;  
24.     }  
25.     alert(message);  
26. }  

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

  

Java代码  

1. function getCurrentLocation()  
2.   {  
3.   if  (navigator.geolocation)  
4.     {  
5.     navigator.geolocation.getCurrentPosition(showMyPosition,showError);  
6.     }  
7.   else   
8.    {  
9.     alert("No, Geolocation API is not supported by this browser." );  
10.     }  
11.  }  
12.   
13.   function showMyPosition(position)  
14. {  
15. var coordinates=position.coords.latitude+"," +position.coords.longitude;  
16. var map_url="http://maps.googleapis.com/maps/api/staticmap?center="   
17. +coordinates+"&zoom=14&size=300x300&sensor=false" ;  
18. document.getElementById("googlemap" ).innerHTML= "<img src='" +map_url+ "' />" ;  
19. }  
20.   
21.  function showError(error)  
22.  {  
23.   switch (error.code)  
24.   {  
25.   case  error.PERMISSION_DENIED:  
26.   alert("This website does not have permission to use the Geolocation API" )  
27.   break ;  
28.   
29.   case  error.POSITION_UNAVAILABLE:  
30.   alert("The current position could not be determined." )  
31.   break ;  
32.   
33.   case  error.TIMEOUT:  
34.   alert("The current position could not be determined within the specified time  out period." )  
35.   break ;  
36.   
37.   case  error.UNKNOWN_ERROR:  
38.   alert("The position could not be determined due to an unknown error." )  
39.   break ;  
40.   }  
41.  }