jQuery Mobile + HTML5 獲取地理位置信息

時間 2019-12-02

標籤 jquery mobile html5 html 獲取地理位置信息欄目 JQuery 简体版

原文原文鏈接

這個代碼也很是簡單，核心是HTML5中GeoLocation API，函數原型定義以下：

void getCurrentPosition(in PositionCallback successCallback,
                           in optional PositionErrorCallback errorCallback,
                           in optional PositionOptions options);

標籤： jQuery Mobile

代碼片斷(3)[全屏查看全部代碼]

1. [代碼][JavaScript]代碼

 
           <!DOCTYPE html> 
          
           <html> 
          
           <head> 
          
           <meta charset= 
           "utf-8" 
           /> 
          
           <meta name= 
           "viewport" 
           content= 
           "width = device-width; initial-scale=1" 
           > 
          
           <title>GeoLocation API演示程序</title> 
          
           <link rel= 
           "stylesheet" 
           href= 
           "jquery.mobile.css" 
           /> 
          
           <script src= 
           "jquery.min.js" 
           ></script> 
          
           <script src= 
           "jquery.mobile.min.js" 
           ></script> 
          
           <script type= 
           "text/javascript" 
           > 
          
           function 
           startgps() 
          
           { 
          
           var 
           gps = navigator.geolocation; 
          
           if 
           (gps) 
          
           { 
          
           gps.getCurrentPosition(showgps, 
          
           function 
           (error) 
          
           { 
          
           alert( 
           "Got an error, code: " 
           + error.code +  
           " message: " 
           + error.message); 
          
           }, 
          
           {maximumAge: 10000});  
           // 這裏設置超時爲10000毫秒，即10秒 
          
           } 
          
           else 
          
           { 
          
           showgps(); 
          
           } 
          
           } 
          
           function 
           showgps(position) 
          
           { 
          
           if 
           (position) 
          
           { 
          
           var 
           latitude = position.coords.latitude; 
          
           var 
           longitude = position.coords.longitude; 
          
           alert( 
           "latitude: " 
           + latitude +  
           "\r\n longitude: " 
           + longitude); 
          
           } 
          
           else 
          
           alert( 
           "position is null" 
           ); 
          
           } 
          
           </script> 
          
           </head> 
          
           <body> 
          
           <section  
           class 
           = 
           "ui-page ui-body-c ui-page-active" 
           data-url= 
           "page1" 
           id= 
           "page1" 
           data-role= 
           "page" 
           > 
          
           <header role= 
           "banner"    
           class 
           = 
           "ui-bar-a ui-header" 
           data-role= 
           "header" 
           > 
          
           <h1 aria-level= 
           "1" 
           role= 
           "heading"    
           tabindex= 
           "0" 
           class 
           = 
           "ui-title" 
           >GeoLocation API Demo</h1> 
          
           </header> 
          
           <div role= 
           "main" 
           data-role= 
           "content" 
           class 
           = 
           "ui-content" 
           > 
          
           <input type= 
           "button" 
           value= 
           "個人位置" 
           onclick= 
           "startgps()" 
           /> 
          
           </div> 
          
           <footer role= 
           "contentinfo" 
           class 
           = 
           "ui-bar-a ui-footer" 
           data-role= 
           "footer" 
           > 
          
           <h1 aria-level= 
           "1" 
           role= 
           "heading"    
           tabindex= 
           "0" 
           class 
           = 
           "ui-title" 
           >Allan Yan</h1> 
          
           </footer> 
          
           </section> 
          
           </html>