摘要：草案的前身名為，于年被提出，于年被接納，并成立了新的工作團隊。的第一份正式草案已于年月日公布。年月日，萬維網聯盟正式宣布凝結了大量網絡工作者心血的規范已經正式定稿。

最近在苦逼學習Javascript，并且是有任務需要去完成的，因此就有一個想法要總結記錄一下自己的學習成果。這次的總結主題是html5實現定位地理位置的任務，結合原生的Javascript實現此功能。

萬維網的核心語言、標準通用標記語言下的一個應用超文本標記語言（HTML）的第五次重大修改版本，2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規范終于制定完成，命名為html5。

HTML5草案的前身名為 Web Applications1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML 工作團隊。HTML 5 的第一份正式草案已于2008年1月22日公布。

HTML5 仍處于完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。2012年12月17日，萬維網聯盟（W3C）正式宣布凝結了大量網絡工作者心血的HTML5規范已經正式定稿。根據W3C的發言稿稱：“HTML5是開放的Web網絡平臺的奠基石?！?/p>

支持Html5的瀏覽器包括Firefox（火狐瀏覽器），IE9及其更高版本，Chrome（谷歌瀏覽器），Safari，Opera等；國內的遨游瀏覽器（Maxthon），以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支持HTML5的能力。

HTML5手機應用的最大優勢就是可以在網頁上直接調試和修改。

HTML5的設計目的是為了在移動設備上支持多媒體。新的語法特征被引進以支持這一點，如video、audio和canvas標記。HTML5還引進了新的功能，可以真正改變用戶與文檔的交互方式。

移動web

手機APP

更好的PC站點優化

這里是我在我的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);
}

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

//失敗時
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定位算是完成了，不算太難，但也不簡單，因為里面有很多可挖掘的空間，比如定位精度，定位范圍，還有具體的地圖定位和導航擴展的后續開發，可以說可擴展性很強，難度也會逐步提升，所以是一個值得研究的技術，我的技術有限，先研究到這里吧，最后附上完整的代碼。

html5定位技術的擴展性很強，技術應用范圍很廣，也是很有價值的一門技術，值得研究。

geolocation的兩個回調函數有很多想象空間，值得我們深思研究。

對于我來說，我算是收獲一門技能，在手機定位上的一個技術。