首頁 > 開發者 > 網站開發

HTML5 geolocation API 獲得使用者當前地理位置

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 HTML5 裡面引入了geolocation的API可以協助使用者獲得瀏覽器所在的地理位置，它不僅可以標示出當前的經緯度，還可以與google map API結合使用來在地圖上標示出當前位置。

HTML代碼，主要就是2大塊，第一部分的容器用於放google地圖和標示位置，第二部分用於顯示精確的經緯度以及精度誤差）。

 
    
  
  1. <!DOCTYPE HTML> 
    2. 
  
  2. <html> 
    3. 
  
  3. <head> 
    4. 
  
  4. <!-- 以下這段代碼是googlemap官方建議的，它讓使用者禁止利用瀏覽器的放大縮小視窗功能，而使用googlemap自己的縮放功能 --> 
    5. 
  
  5. <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
    6. 
  
  6. <title>在頁面上使用Google Map，擷取瀏覽器的當前位置</title> 
    7. 
  
  7.  
    8. 
  
  8. <!-- 因為頁面上要使用到google地圖，所以匯入googlemap地圖檔案 --> 
    9. 
  
  9. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    10. 
  
  10.  
    11. 
  
  11. <!-- 這段js檔案是我自己寫的，用於利用HTML5的geolocation API獲得當前位置，並且在google地圖上標識出來 --> 
    12. 
  
  12. <script type="text/javascript" src="js/googlemap.js"></script> 
    13. 
  
  13.    
    14. 
  
  14. </head> 
    15. 
  
  15.  
    16. 
  
  16. <body onload="init()"> 
    17. 
  
  17. Hello,Google Map! 
    18. 
  
  18. <br> 
    19. 
  
  19. <!-- 這一個正方形地區是用來畫google地圖的 --> 
    20. 
  
  20. <div id="map"style="width: 400px; height: 400px"></div> 
    21. 
  
  21. <br> 
    22. 
  
  22. <!-- 這一個地區是用來顯示你的位置資訊的 --> 
    23. 
  
  23. <h3>您的瀏覽器顯示了您當前的地理位置資訊是:</h3> 
    24. 
  
  24. <p id="positionInfo"></p> 
    25. 
  
  25. </body> 
    26. 
  
  26.  
    27. 
  
  27. </html> 
    28.

javascript方法，主要就是用於繪製地圖以及標示位置），以及給出了當擷取位置成功或者失敗時候的回呼函數定義：

 
    
  
  1. //這是初始化方法，用來繪製google地圖 
    2. 
  
  2. function init() { 
    3. 
  
  3. console.log("entering the init() method"); 
    4. 
  
  4. //首先必須判斷瀏覽器是否有geolocation屬性，因為HTML5 才新增了這個屬性，不是所有瀏覽器都支援 
    5. 
  
  5. if (navigator.geolocation) { 
    6. 
  
  6. //如果瀏覽器支援geolocation，則使用geolocation的getCurrentLocation方法來取得使用者當前的地理位置， 
    7. 
  
  7. //並且在成功取得之後調用show_map()回呼函數 
    8. 
  
  8. console.log(' Browser support geolocation '); 
    9. 
  
  9. navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
    10. 
  
  10. } else { 
    11. 
  
  11. console.log(' Browser doesnt support geolocation '); 
    12. 
  
  12. } 
    13. 
  
  13.  
    14. 
  
  14. } 
    15. 
  
  15.  
    16. 
  
  16.  
    17. 
  
  17. //這是一個回呼函數，用於當geolocation成功取得使用者瀏覽器所在的地理位置時候的響應，它吧所有的位置資訊封裝在position中 
    18. 
  
  18. //所以我們就需要解析position來取得使用者的詳細資料 
    19. 
  
  19. function show_map(position) { 
    20. 
  
  20.  
    21. 
  
  21. // 取得當前的地理位置 
    22. 
  
  22. var coords = position.coords; 
    23. 
  
  23.   
    24. 
  
  24. //Part 1; 顯示使用者的精確位置資訊 
    25. 
  
  25. //取得頁面上用於顯示精確位置資訊的組件 
    26. 
  
  26. var positionInfo=document.getElementById("positionInfo"); 
    27. 
  
  27. var positionString="經度: "+coords.longitude+"<br>"; 
    28. 
  
  28. positionString+="維度: "+coords.latitude+"<br>"; 
    29. 
  
  29. var altitude=coords.altitude; 
    30. 
  
  30. if( altitude!=null){ 
    31. 
  
  31. positionString+="海拔高度"+coords.altitude+"<br>"; 
    32. 
  
  32. } 
    33. 
  
  33. positionString+="經緯度精確到："+coords.accuracy+"米"+"<br>"; 
    34. 
  
  34. positionInfo.innerHTML=positionString; 
    35. 
  
  35. //Part 2; 在google地圖上顯示瀏覽器的當前位置 
    36. 
  
  36. // 設定地圖參數，將使用者的當前位置的維度和精度都設定為地圖的中心點 
    37. 
  
  37. var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
    38. 
  
  38. var myOptions = { 
    39. 
  
  39. // 設定放大倍數 
    40. 
  
  40. zoom : 14, 
    41. 
  
  41. // 將地圖的中心點設定為指定的座標點 
    42. 
  
  42. center : latlng, 
    43. 
  
  43. // 指定地圖的類型，這裡選擇的是街道地圖 
    44. 
  
  44. mapTypeId : google.maps.MapTypeId.ROADMAP 
    45. 
  
  45. }; 
    46. 
  
  46. // 建立地圖並在"map"div中顯示，吧這個地圖叫做map1 
    47. 
  
  47. var map1; 
    48. 
  
  48. map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
    49. 
  
  49. // 在地圖上建立標記 
    50. 
  
  50. var marker = new google.maps.Marker({ 
    51. 
  
  51. //標註剛才建立的標註點，因為標註點是由當前的經緯度設定的，所以表示了當前位置 
    52. 
  
  52. position : latlng, 
    53. 
  
  53. //標註在哪張地圖上，我們建立了map1作為google map，所以標註在map1上 
    54. 
  
  54. map : map1 
    55. 
  
  55. }); 
    56. 
  
  56. // 設定標註視窗，並且指定該視窗的注釋文字 
    57. 
  
  57. var infowindow = new google.maps.InfoWindow({ 
    58. 
  
  58. content : "這是Charles的瀏覽器的當前位置!" 
    59. 
  
  59. }); 
    60. 
  
  60. // 開啟標註視窗 
    61. 
  
  61. infoWindow.open(map1, marker); 
    62. 
  
  62.  
    63. 
  
  63. } 
    64. 
  
  64.  
    65. 
  
  65.  
    66. 
  
  66.  
    67. 
  
  67. //這是第二個回呼函數，用於當geolocation擷取使用者瀏覽器所在的地理位置失敗時候的響應 
    68. 
  
  68. //error對象封裝了所有的可能出現的無法獲得地理位置的錯誤資訊，並且HTML5為其預留了錯誤碼，可以取值{1,2,3} 
    69. 
  
  69. function handle_error(error){ 
    70. 
  
  70. var errorTypes={ 
    71. 
  
  71. 1:'位置服務被拒絕', 
    72. 
  
  72. 2:'擷取不到位置資訊', 
    73. 
  
  73. 3:'擷取資訊逾時' 
    74. 
  
  74. }; 
    75. 
  
  75. console.log(errorTypes[error.code] + ":,不能確定你的當前地理位置"); 
    76. 
  
  76. } 
    77.

 

要顯示結果，必須讓使用者開啟共用位置功能，因為這是隱私，我測試了下Opera 11和Firefox 10 ，Google Chrome都可以。

Opera 11開始就需要使用者選擇是否要共用地理位置：

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1324121A8-0.png" />

然後要簽一份使用者協議：

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1324122F1-1.png" />

 

對於Firefox瀏覽器，也是需要得到使用者共用自己位置的許可：

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/132412E93-2.png" />

 

 

最終，就可以顯示使用者當前位置了實際是你的ip暴露了你的資訊），比如我住在上海廣蘭路地鐵站附近，所以顯示結果如下：

 

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/132412KK-3.png" />

 

本文出自 “平行線的凝聚” 部落格，請務必保留此出處http://supercharles888.blog.51cto.com/609344/856656

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
chrome geolocation api geolocation api example php php geolocation api google html geolocation api google api for geolocation free geolocation api geolocation service api
相關文章
H5 中html 頁面存為圖片並長按 儲存
Citrix NetScaler產品學習筆記之一：Citrix NetScaler概述

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More