摘要：草案的前身名為，于年被提出，于年被接納，并成立了新的工作團(tuán)隊(duì)。的第一份正式草案已于年月日公布。年月日，萬(wàn)維網(wǎng)聯(lián)盟正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的規(guī)范已經(jīng)正式定稿。

最近在苦逼學(xué)習(xí)Javascript，并且是有任務(wù)需要去完成的，因此就有一個(gè)想法要總結(jié)記錄一下自己的學(xué)習(xí)成果。這次的總結(jié)主題是html5實(shí)現(xiàn)定位地理位置的任務(wù)，結(jié)合原生的Javascript實(shí)現(xiàn)此功能。

萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言（HTML）的第五次重大修改版本，2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成，命名為html5。

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

HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5支持。2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。”

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

HTML5手機(jī)應(yīng)用的最大優(yōu)勢(shì)就是可以在網(wǎng)頁(yè)上直接調(diào)試和修改。

HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語(yǔ)法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式。

移動(dòng)web

手機(jī)APP

更好的PC站點(diǎn)優(yōu)化

這里是我在我的demo下的實(shí)現(xiàn)思路，你大可作為參考也可以指正一下我的思路的問(wèn)題，謝謝。

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了確定用戶位置的功能，借助這個(gè)特性能夠開(kāi)發(fā)基于位置信息的應(yīng)用。在我的demo中使用的是百度提供的api接口，調(diào)用html5的geolocation方法獲取客戶端當(dāng)前經(jīng)緯度，從而獲得客戶端所在的地理位置，包括省市區(qū)信息，甚至有街道、門(mén)牌號(hào)等詳細(xì)的地理位置信息。

值得注意的一點(diǎn)是，PC很多瀏覽器對(duì)于html5的定位技術(shù)是不太友好的，很多瀏覽器都是默認(rèn)拒絕定位，一般只有IE是可以正常使用，但是獲取到的經(jīng)緯度偏差很大（這個(gè)原因很可能是因?yàn)镻C的定位獲取客戶機(jī)位置的時(shí)候不是當(dāng)前電腦的位置，而可能是瀏覽器調(diào)用服務(wù)器的物理機(jī)器的位置，不知道這個(gè)原因）；相反在手機(jī)訪問(wèn)的時(shí)候，由于一般手機(jī)上都有GPS模塊，所以定位效果會(huì)好很多，原因就在于手機(jī)上的GPS模塊對(duì)geolocation特性的支持是很好的。最終的結(jié)論是，html5的定位在手機(jī)上測(cè)試是最佳的選擇，PC建議使用IE瀏覽器。

好了，廢話不多說(shuō)（其實(shí)已經(jīng)說(shuō)了很多），立馬進(jìn)入實(shí)戰(zhàn)階段。

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("您的瀏覽器不支持地理位置定位");
    }
}

這里我寫(xiě)了一個(gè)方法，主要功能是在調(diào)用html5的geolocation()前，先判斷當(dāng)前瀏覽器是否支持html5，這個(gè)判斷基本在很多PC瀏覽器都會(huì)讓程序掛掉（原因就是PC絕大部分瀏覽器不支持或者拒絕html5定位）.

如果瀏覽器支持，那么程序就會(huì)調(diào)用geolocation方法了，這是方法里面有2個(gè)回調(diào)函數(shù)：一個(gè)是定位成功后的處理操作（一般程序會(huì)返回經(jīng)緯度給你進(jìn)行后續(xù)的定位數(shù)據(jù)處理），另外一個(gè)是定位失敗后的處理操作（具體大概就是錯(cuò)誤信息，然后就是你的定位失敗后的后續(xù)操作），第三個(gè)參數(shù)很少用到，我自己也沒(méi)有去關(guān)注它有什么用，各位看官有興趣可以了解一下。

//成功時(shí)
function onSuccess(position) {
    //返回用戶位置
    //經(jīng)度
    var longitude = position.coords.longitude;
    //緯度
    var latitude = position.coords.latitude;
    alert("當(dāng)前地址的經(jīng)緯度：經(jīng)度" + longitude + "，緯度" + latitude);
    //根據(jù)經(jīng)緯度獲取地理位置，不太準(zhǔn)確，獲取城市區(qū)域還是可以的
    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);
}

我這里寫(xiě)了一個(gè)成功后的回調(diào)函數(shù)，第一步獲取定位成功返回的經(jīng)緯度數(shù)據(jù)，然后結(jié)合百度那邊提供的接口進(jìn)行具體位置的轉(zhuǎn)換，最后我還有一個(gè)數(shù)據(jù)提交的方法，這個(gè)是我具體業(yè)務(wù)的后續(xù)操作了，你可以根據(jù)具體情況進(jìn)行特殊處理。下面附上百度接口：

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

緊接著就是定位失敗的回調(diào)函數(shù)了，這個(gè)就簡(jiǎn)單輸出錯(cuò)誤信息，然后我也寫(xiě)了一個(gè)失敗后的后續(xù)操作，你可以根據(jù)你的需要進(jìn)行自己的具體操作。

這樣，整個(gè)html5定位算是完成了，不算太難，但也不簡(jiǎn)單，因?yàn)槔锩嬗泻芏嗫赏诰虻目臻g，比如定位精度，定位范圍，還有具體的地圖定位和導(dǎo)航擴(kuò)展的后續(xù)開(kāi)發(fā)，可以說(shuō)可擴(kuò)展性很強(qiáng)，難度也會(huì)逐步提升，所以是一個(gè)值得研究的技術(shù)，我的技術(shù)有限，先研究到這里吧，最后附上完整的代碼。

html5定位技術(shù)的擴(kuò)展性很強(qiáng)，技術(shù)應(yīng)用范圍很廣，也是很有價(jià)值的一門(mén)技術(shù)，值得研究。

geolocation的兩個(gè)回調(diào)函數(shù)有很多想象空間，值得我們深思研究。

對(duì)于我來(lái)說(shuō)，我算是收獲一門(mén)技能，在手機(jī)定位上的一個(gè)技術(shù)。