HTML5 利用百度地圖和谷歌地圖接口獲取用戶地址
從前面可知,利用HTML5的Geolocation可以獲取用戶的經(jīng)緯度,那么需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運(yùn)的是,百度地圖和谷歌地圖都提供了這方面的接口,我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口,就會(huì)返回用戶所在的地理位置,包括省、市、區(qū)信息,甚至有街道、門牌號(hào)等詳細(xì)的地理位置信息。
首先在頁面定義要展示地理位置的div,分別定義id#baidu_geo和id#google_geo。只需修改關(guān)鍵函數(shù)showPosition()。先來看百度地圖接口交互,將經(jīng)諱度信息通過Ajax方式發(fā)送給百度地圖接口,接口會(huì)返回相應(yīng)的省、市、區(qū)和街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù),我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意,這里用到了jQuery庫,需要先加載jQuery庫文件,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+"地址位置獲取失敗");
}
});
});
再來看谷歌地圖接口交互。同樣,將經(jīng)緯度信息通過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;
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è)簡單的實(shí)例開發(fā)出很多復(fù)雜的應(yīng)用。
點(diǎn)擊加載更多評(píng)論>>