在通过 geolocation 获取到当前的 GPS 坐标后，需要通过“逆地理位置解析”才能得到街道对应的街道、建筑物、周边等相关信息。

下面我使用国内的三家主要的地图厂商（腾讯地图、高德地图、百度地图）来获取我所在的地理位置相关信息。

操作方式同样非常简单，都需要至少以下几个步骤：

• 创建 AppKey 应用密钥；

• 获取用户地理位置坐标；

• 发 HTTP 请求获取特定信息；

• 解析并使用请求返回的数据；

创建 AppKey 应用密钥

登录各自地图官方网站注册并成为开发者并申请就好了，步骤非常简单，不会超过 5 分钟时间。创建好后，会拿到一串字符串密钥，用于验证开发者。

获取用户地理位置坐标

这个在前面的文章中已经讲过了，直接调用 navigator.geolocation.getCurrentPosition() 就好了，不再多说。

发 HTTP 请求获取特定信息

三家厂商的获取接口几乎无异，参数也都差不多。

请求地址

// 腾讯地图
https://apis.map.qq.com/ws/geocoder/v1/

// 高德地图
https://api.map.baidu.com/geocoder/v2/

// 百度地图
https://restapi.amap.com/v3/geocode/regeo

注：三家厂商都支持 HTTP/HTTPS 版本，请自行选择，或直接写 “//”。

注：请求的资源是带版本号的，所以，我文章中使用的可能不是最新版本。

请求参数

基本的参数有：密钥、经纬度、源坐标类型、输出类型、回调函数、是否获取周边等。

参数的名字有些不同，但意义相似，另外一些值得注意的地方，直接见我后面的例子就好了。

解析并使用请求返回的数据

大多数都支持几种格式：XML、JSON、JSONP，按需选择。

返回值意义及各字段的含义见各自的开发文档。

举个例子

例子我直接使用 JavaScript 来实现了。

// 解析百度地图返回的数据function update_address_baidu(data) {
    update_address(data, $('#bd'));}// 解析腾讯地图返回的数据function update_address_tencent(data) {
    update_address(data, $('#tx'));}// 解析高德地图返回的数据function update_address_gaode(data) {
    update_address(data, $('#gd'));}// 因为数据格式差不多，所以这里一并处理了function update_address(data, ul) {
    ul.empty();
    if(data.status === 0 || data.status === '1') {
        var r = data.result || data.regeocode;
        // POI 是周边信息
        (r.pois || []).forEach(function(poi) {
            var all = (poi.name || poi.title) + '（' + (poi.addr || poi.address) + '）';
            var li = $('<li/>');
            li.text(all);
            ul.append(li);
        });
    }}// 高德有个坑，不支持设定源坐标的类型// 所以还得单独转换一下坐标function update_address_gaode_coord(data) {
    if(data.status === '1') {
        var s = data.locations;
        var g = document.createElement('script');
        g.src = '//restapi.amap.com/v3/geocode/regeo?key=93ebbbb772a24c6625def52e779dc38b&location='+s+'&extensions=all&callback=update_address_gaode'
        $('#results').append(g);
    }}// 获取详细/特定信息，在获取到坐标后执行function get_detail_location(lat,lng) {
    var results = $('#results');

    var bd = document.createElement('script');
    bd.src = '//api.map.baidu.com/geocoder/v2/?ak=uVQwCq4gtGAyQWmpDwLD7g9bGXRa6UFm&output=json&location='+lat+','+lng+'&coordtype=wgs84ll&pois=1&callback=update_address_baidu';
    results.append(bd);

    var tx = document.createElement('script');
    tx.src = '//apis.map.qq.com/ws/geocoder/v1/?key=3V3BZ-J3KRD-XLI4M-P4VGS-KITNH-7IBO2&location='+lat+','+lng+'&coord_type=1&get_poi=1&output=jsonp&callback=update_address_tencent';
    results.append(tx);

    // 注意高德的经纬度参数与上面两个是相反的
    var gd = document.createElement('script');
    gd.src = '//restapi.amap.com/v3/assistant/coordinate/convert?key=93ebbbb772a24c6625def52e779dc38b&locations='+lng+','+lat+'&coordsys=gps&output=json&callback=update_address_gaode_coord'
    results.append(gd);}function get_my_addr() {
    if('geolocation' in navigator) {
        navigator.geolocation.getCurrentPosition(
            // 若获取成功
            function(position) {
                var lat = position.coords.latitude;     // 纬度
                var lng = position.coords.longitude;    // 经度

                get_detail_location(lat, lng);
            },
            // 若获取失败
            function(err) {
                alert('获取地理位置时遇到错误。');
            },
            // 更多参数
            {
                enableHighAccuracy: true,               // 启用高精度获取
            }
        );
    }
    else {
        alert('你的浏览器不支持地理位置服务。');
    }}

输出结果：

腾讯地图：

高德地图：

百度地图：

一些说明

这里的密钥由于是在网页上使用，免不了被公开，所以请在管理后台设置好域名白名单等手段以防止被盗用。

坐标系统众多（GPS坐标，卫星坐标，百度地图坐标，腾讯地图坐标，高德地图坐标），注意转换与参数顺序，否则会出现位置偏差。

由于 Google 无法访问，我就不用来举例了。同时，电脑端由于没有GPS/基站都设施，可能会仅使用IP作为判断标准（非常不精确）。

由于众多浏览器的地理位置服务器均为 Google 地图，所以如果电脑端浏览器开了代理，可能会出现不正确的实际地址。

除 Google 地图 API 以外的上述全部均不支持跨源访问，所以请全部使用 JSONP 的形式进行数据处理。

• HTML
• HTML5
• api
• 地图
• 地图