HTML5 geolocation API 得到用戶當前地理位置

時間 2020-01-15

標籤 html5 html geolocation api 得到用戶當前地理位置欄目 HTML5 简体版

原文原文鏈接

HTML5 裏面引入了geolocation的API能夠幫助用戶得到瀏覽器所在的地理位置，它不只能夠標示出當前的經緯度，還能夠與google map API結合使用來在地圖上標示出當前位置。javascript

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

  
  
  
  
   
   
   
   <!DOCTYPE HTML> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
   <!-- 如下這段代碼是googlemap官方建議的，它讓用戶禁止利用瀏覽器的放大縮小窗口功能，而使用googlemap本身的縮放功能 --> 
   
   
   
   <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
   
   
   
   <title>在頁面上使用Google Map，獲取瀏覽器的當前位置</title> 
   
   
   
    
   
   
   
   <!-- 由於頁面上要使用到google地圖，因此導入googlemap地圖文件 --> 
   
   
   
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
   
   
   
    
   
   
   
   <!-- 這段js文件是我本身寫的，用於利用HTML5的geolocation API得到當前位置，而且在google地圖上標識出來 --> 
   
   
   
   <script type="text/javascript" src="js/googlemap.js"></script> 
   
   
   
      
   
   
   
   </head> 
   
   
   
    
   
   
   
   <body onload="init()"> 
   
   
   
   Hello,Google Map! 
   
   
   
   <br> 
   
   
   
   <!-- 這一個正方形區域是用來畫google地圖的 --> 
   
   
   
   <div id="map"style="width: 400px; height: 400px"></div> 
   
   
   
   <br> 
   
   
   
   <!-- 這一個區域是用來顯示你的位置信息的 --> 
   
   
   
   <h3>您的瀏覽器顯示了您當前的地理位置信息是:</h3> 
   
   
   
   <p id="positionInfo"></p> 
   
   
   
   </body> 
   
   
   
    
   
   
   
   </html>

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

  
  
  
  
   
   
   
   //這是初始化方法，用來繪製google地圖 
   
   
   
   function init() { 
   
   
   
   console.log("entering the init() method"); 
   
   
   
   //首先必須判斷瀏覽器是否有geolocation屬性，由於HTML5 才新增了這個屬性，不是全部瀏覽器都支持 
   
   
   
   if (navigator.geolocation) { 
   
   
   
   //若是瀏覽器支持geolocation，則使用geolocation的getCurrentLocation方法來取得用戶當前的地理位置， 
   
   
   
   //而且在成功取得以後調用show_map()回調函數 
   
   
   
   console.log(' Browser support geolocation '); 
   
   
   
   navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
   
   
   
   } else { 
   
   
   
   console.log(' Browser doesnt support geolocation '); 
   
   
   
   } 
   
   
   
    
   
   
   
   } 
   
   
   
    
   
   
   
    
   
   
   
   //這是一個回調函數，用於當geolocation成功取得用戶瀏覽器所在的地理位置時候的響應，它吧全部的位置信息封裝在position中 
   
   
   
   //因此咱們就須要解析position來取得用戶的詳細信息 
   
   
   
   function show_map(position) { 
   
   
   
    
   
   
   
   // 取得當前的地理位置 
   
   
   
   var coords = position.coords; 
   
   
   
     
   
   
   
   //Part 1; 顯示用戶的精確位置信息 
   
   
   
   //取得頁面上用於顯示精確位置信息的組件 
   
   
   
   var positionInfo=document.getElementById("positionInfo"); 
   
   
   
   var positionString="經度: "+coords.longitude+"<br>"; 
   
   
   
   positionString+="維度: "+coords.latitude+"<br>"; 
   
   
   
   var altitude=coords.altitude; 
   
   
   
   if( altitude!=null){ 
   
   
   
   positionString+="海拔高度"+coords.altitude+"<br>"; 
   
   
   
   } 
   
   
   
   positionString+="經緯度精確到："+coords.accuracy+"米"+"<br>"; 
   
   
   
   positionInfo.innerHTML=positionString; 
   
   
   
   //Part 2; 在google地圖上顯示瀏覽器的當前位置 
   
   
   
   // 設定地圖參數，將用戶的當前位置的維度和精度都設定爲地圖的中心點 
   
   
   
   var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
   
   
   
   var myOptions = { 
   
   
   
   // 設定放大倍數 
   
   
   
   zoom : 14, 
   
   
   
   // 將地圖的中心點設定爲指定的座標點 
   
   
   
   center : latlng, 
   
   
   
   // 指定地圖的類型，這裏選擇的是街道地圖 
   
   
   
   mapTypeId : google.maps.MapTypeId.ROADMAP 
   
   
   
   }; 
   
   
   
   // 建立地圖並在"map"div中顯示，吧這個地圖叫作map1 
   
   
   
   var map1; 
   
   
   
   map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
   
   
   
   // 在地圖上建立標記 
   
   
   
   var marker = new google.maps.Marker({ 
   
   
   
   //標註剛纔建立的標註點，由於標註點是由當前的經緯度設定的，因此表示了當前位置 
   
   
   
   position : latlng, 
   
   
   
   //標註在哪張地圖上，咱們建立了map1做爲google map，因此標註在map1上 
   
   
   
   map : map1 
   
   
   
   }); 
   
   
   
   // 設定標註窗口，而且指定該窗口的註釋文字 
   
   
   
   var infowindow = new google.maps.InfoWindow({ 
   
   
   
   content : "這是Charles的瀏覽器的當前位置!" 
   
   
   
   }); 
   
   
   
   // 打開標註窗口 
   
   
   
   infoWindow.open(map1, marker); 
   
   
   
    
   
   
   
   } 
   
   
   
    
   
   
   
    
   
   
   
    
   
   
   
   //這是第二個回調函數，用於當geolocation獲取用戶瀏覽器所在的地理位置失敗時候的響應 
   
   
   
   //error對象封裝了全部的可能出現的沒法得到地理位置的錯誤信息，而且HTML5爲其預留了錯誤碼，能夠取值{1,2,3} 
   
   
   
   function handle_error(error){ 
   
   
   
   var errorTypes={ 
   
   
   
   1:'位置服務被拒絕', 
   
   
   
   2:'獲取不到位置信息', 
   
   
   
   3:'獲取信息超時' 
   
   
   
   }; 
   
   
   
   console.log(errorTypes[error.code] + ":,不能肯定你的當前地理位置"); 
   
   
   
   }