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

在通过 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 的形式进行数据处理。

        发表于:2017年02月07日 ,阅读量:3032 ,标签:HTML · 地图

        版权声明:若非特别注明,本站所有文章均为作者原创,转载请务必注明原文地址。