[HTML] 通过腾讯地图、高德地图、百度地图开发接口获取坐标对应的周边相关信息

更新： 以前出于好意暴露了个人的KEY，现已被烂用。为不影响您的业务，请使用我的KEY的朋友去申请自己的KEY，我的KEY将在不久后停用。

在通过 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 来实现了。请替换参数中的“你的KEY”为你自己的KEY。

// 解析百度地图返回的数据
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=你的KEY&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=你的KEY&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=你的KEY&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=你的KEY&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 的形式进行数据处理。