Javascript學習總結@html5實現定位地理位置

時間 2019-11-11

標籤 javascript 學習總結 html5 html 實現定位地理位置欄目 JavaScript 简体版

原文原文鏈接

簡述

最近在苦逼學習Javascript，而且是有任務須要去完成的，所以就有一個想法要總結記錄一下本身的學習成果。此次的總結主題是html5實現定位地理位置的任務，結合原生的Javascript實現此功能。 javascript

html5

1. 什麼是html5？ html

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改版本，2014年10月29日，萬維網聯盟宣佈，通過接近8年的艱苦努力，該標準規範終於制定完成，命名爲html5。 html5
HTML5草案的前身名爲 Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，併成立了新的
HTML 工做團隊。HTML 5 的第一份正式草案已於2008年1月22日公佈。 java
HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5
支持。2012年12月17日，萬維網聯盟（W3C）正式宣佈凝結了大量網絡工做者心血的HTML5規範已經正式定稿。根據W3C的發言稿稱：「HTML5是開放的Web網絡平臺的奠定石。」 git

2. html5有什麼特色和優點？ web

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的遨遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器一樣具有支持HTML5的能力。 canvas
HTML5手機應用的最大優點就是能夠在網頁上直接調試和修改。 api
HTML5的設計目的是爲了在移動設備上支持多媒體。新的語法特徵被引進以支持這一點，如video、audio和canvas
標記。HTML5還引進了新的功能，能夠真正改變用戶與文檔的交互方式。瀏覽器

3.html能作什麼？服務器

移動web
手機APP
更好的PC站點優化

html5 - 地理位置定位技術

這裏是我在個人demo下的實現思路，你大可做爲參考也能夠指正一下個人思路的問題，謝謝。
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了肯定用戶位置的功能，藉助這個特性可以開發基於位置信息的應用。在個人demo中使用的是百度提供的api接口，調用html5的geolocation方法獲取客戶端當前經緯度，從而得到客戶端所在的地理位置，包括省市區信息，甚至有街道、門牌號等詳細的地理位置信息。
值得注意的一點是，PC不少瀏覽器對於html5的定位技術是不太友好的，不少瀏覽器都是默認拒絕定位，通常只有IE是能夠正常使用，可是獲取到的經緯度誤差很大（這個緣由極可能是由於PC的定位獲取客戶機位置的時候不是當前電腦的位置，而多是瀏覽器調用服務器的物理機器的位置，不知道這個緣由）；相反在手機訪問的時候，因爲通常手機上都有GPS模塊，因此定位效果會好不少，緣由就在於手機上的GPS模塊對geolocation特性的支持是很好的。最終的結論是，html5的定位在手機上測試是最佳的選擇，PC建議使用IE瀏覽器。

具體實現方案

好了，廢話很少說（其實已經說了不少），立馬進入實戰階段。

function getLocation() { var options = {
        enableHighAccuracy : true,
        maximumAge : 1000 }
    alert('this is getLocation()'); if (navigator.geolocation) { //瀏覽器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else { //瀏覽器不支持geolocation alert('您的瀏覽器不支持地理位置定位');
    }
}

這裏我寫了一個方法，主要功能是在調用html5的geolocation()前，先判斷當前瀏覽器是否支持html5，這個判斷基本在不少PC瀏覽器都會讓程序掛掉（緣由就是PC絕大部分瀏覽器不支持或者拒絕html5定位）
若是瀏覽器支持，那麼程序就會調用geolocation方法了，這是方法裏面有2個回調函數：一個是定位成功後的處理操做（通常程序會返回經緯度給你進行後續的定位數據處理），另一個是定位失敗後的處理操做（具體大概就是錯誤信息，而後就是你的定位失敗後的後續操做），第三個參數不多用到，我本身也沒有去關注它有什麼用，各位看官有興趣能夠了解一下。

//成功時 function onSuccess(position) { //返回用戶位置 //經度 var longitude = position.coords.longitude; //緯度 var latitude = position.coords.latitude;
    alert('當前地址的經緯度：經度' + longitude + '，緯度' + latitude); //根據經緯度獲取地理位置，不太準確，獲取城市區域仍是能夠的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs) { var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber);
    });
    postData(longitude, latitude);
}

我這裏寫了一個成功後的回調函數，第一步獲取定位成功返回的經緯度數據，而後結合百度那邊提供的接口進行具體位置的轉換，最後我還有一個數據提交的方法，這個是我具體業務的後續操做了，你能夠根據具體狀況進行特殊處理。下面附上百度接口：

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

//失敗時 function onError(error) { switch (error.code) { case 1:
            alert("位置服務被拒絕"); break; case 2:
            alert("暫時獲取不到位置信息"); break; case 3:
            alert("獲取信息超時"); break; case 4:
            alert("未知錯誤"); break;
    } //經度 var longitude = 23.1823780000; //緯度 var latitude = 113.4233310000;
    postData(longitude, latitude);
}

緊接着就是定位失敗的回調函數了，這個就簡單輸出錯誤信息，而後我也寫了一個失敗後的後續操做，你能夠根據你的須要進行本身的具體操做。

這樣，整個html5定位算是完成了，不算太難，但也不簡單，由於裏面有不少可挖掘的空間，好比定位精度，定位範圍，還有具體的地圖定位和導航擴展的後續開發，能夠說可擴展性很強，難度也會逐步提高，因此是一個值得研究的技術，個人技術有限，先研究到這裏吧，最後附上完整的代碼。

完整demo代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo</title> </head> <body> </body> </html> <!--頭部模塊 end--> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> <script type="text/javascript" > // ======================================= html定位地理位置 開始 ================================================= function getLocation() { var options = { enableHighAccuracy : true, maximumAge : 1000 } alert('this is getLocation()'); if (navigator.geolocation) { //瀏覽器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } else { //瀏覽器不支持geolocation alert('您的瀏覽器不支持地理位置定位'); } } //成功時 function onSuccess(position) { //返回用戶位置 //經度 var longitude = position.coords.longitude; //緯度 var latitude = position.coords.latitude; alert('當前地址的經緯度：經度' + longitude + '，緯度' + latitude); //根據經緯度獲取地理位置，不太準確，獲取城市區域仍是能夠的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs) { var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber); }); // 這裏後面能夠寫你的後續操做了 postData(longitude, latitude); } //失敗時 function onError(error) { switch (error.code) { case 1: alert("位置服務被拒絕"); break; case 2: alert("暫時獲取不到位置信息"); break; case 3: alert("獲取信息超時"); break; case 4: alert("未知錯誤"); break; } // 這裏後面能夠寫你的後續操做了 //經度 var longitude = 23.1823780000; //緯度 var latitude = 113.4233310000; postData(longitude, latitude); } // ======================================= html定位地理位置 結束 ================================================= // =============================== 業務邏輯 開始 ================================= // 頁面載入時請求獲取當前地理位置 window.onload = function(){ // html5獲取地理位置 getLocation(); }; // =============================== 業務邏輯 結束 ================================= </script>