HTML5 利用百度地圖和谷歌地圖接口獲取用戶地址

    從前面可知，利用HTML5的Geolocation可以獲取用戶的經(jīng)緯度，那么需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運(yùn)的是，百度地圖和谷歌地圖都提供了這方面的接口，我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口，就會(huì)返回用戶所在的地理位置，包括省、市、區(qū)信息，甚至有街道、門牌號(hào)等詳細(xì)的地理位置信息。

    首先在頁(yè)面定義要展示地理位置的div,分別定義id#baidu_geo和id#google_geo。只需修改關(guān)鍵函數(shù)showPosition()。先來(lái)看百度地圖接口交互，將經(jīng)諱度信息通過(guò)Ajax方式發(fā)送給百度地圖接口，接口會(huì)返回相應(yīng)的省、市、區(qū)和街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù)，我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意，這里用到了jQuery庫(kù)，需要先加載jQuery庫(kù)文件，JS代碼如下：

    function showPosition(position){

    var latlon = position.coords.latitude+','1+position.coords.longitude;

    //baidu 

    var url =

    "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b& callback=renderReverse&location="+latlon+"&output=json&pois=0";

    $.ajax({

    type: "GET".

    dataType:"jsonp"，

    url: url,

    beforeSend: function(){

    $("#baidu_geo"）.html('正在定位...'）;

    }.

    success: function (json) {

    if(json.status==O){

    $("#baidu_geo").html(json.result.formatted_address);

    }

    },

    error: function (XMLHttpRequest, textStatus，errorThrown) {

    $("#baidu_geo").html(latlon+"地址位置獲取失敗"）;

    }

    });

    });

    再來(lái)看谷歌地圖接口交互。同樣，將經(jīng)緯度信息通過(guò)Ajax方式發(fā)送給谷歌地圖接口，接口會(huì)返回相應(yīng)的省、市、區(qū)和街道信息。谷歌地圖接口返回的也是一串JSON數(shù)據(jù)，這些JSON數(shù)據(jù)比百度地圖接口返回的要更詳細(xì)?？梢愿鶕?jù)需求將需要的信息展示給    div#google_geo, JS代碼如下：

    function showPosition(position){

    var latlon = position,coords,latitude+','+position.coords.longitude;

    //google

    var url = 'http://maps.google.cn/maps/api/geocode/json?latlng='+1atlon+'&lan guage=CN';

    $.ajax({

    type: "GET",

    url: url,

    beforeSend: function(){

    $("#google_geo").html('正在定位,,,'）;

    },

    success: function (json) {

    if(json.status=='OK'){

    var results = json.results;

    $.each(results.function(index,array){

    if (index==O){

    $("#google_geo").html(array['formatted_address']);

    }

    });

    }

    },

    error: function (XMLHttpRequest, textStatus, errorThrown){

    $("#google_geo").html(latlon+"地址位置獲取失敗"）;

    }

    });

    }

    以上代碼分別將百度地圖接口和谷歌地圖接口整合到函數(shù)showPositionO中，可以根據(jù)實(shí)際情況進(jìn)行調(diào)用。當(dāng)然這只是一個(gè)筒單的應(yīng)用，可以根據(jù)這個(gè)簡(jiǎn)單的實(shí)例開發(fā)出很多復(fù)雜的應(yīng)用。