HTML5 利用百度地图和谷歌地图接口获取用户地址

    从前面可知，利用HTML5的Geolocation可以获取用户的经纬度，那么需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是，百度地图和谷歌地图都提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，就会返回用户所在的地理位置，包括省、市、区信息，甚至有街道、门牌号等详细的地理位置信息。

    首先在页面定义要展示地理位置的div,分别定义id#baidu_geo和id#google_geo。只需修改关键函数showPosition()。先来看百度地图接口交互，将经讳度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省、市、区和街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给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+"地址位置获取失败"）;

    }

    });

    });

    再来看谷歌地图接口交互。同样，将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省、市、区和街道信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细。可以根据需求将需要的信息展示给    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+"地址位置获取失败"）;

    }

    });

    }

    以上代码分別将百度地图接口和谷歌地图接口整合到函数showPositionO中，可以根据实际情况进行调用。当然这只是一个筒单的应用，可以根据这个简单的实例开发出很多复杂的应用。