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

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

在通过 geolocation 获取到当前的 GPS 坐标后，需要通过“逆地理位置解析”才能得到街道对应的街道、建筑物、周边等相关信息。 下面我使用国内的三家主要的地图厂商（腾讯地图、高德地图、百度地图）来获取我所在的地理位置相关信息。

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

创建 AppKey 应用密钥；获取用户地理位置坐标；发 HTTP 请求获取特定信息；解析并使用请求返回的数据；

创建 AppKey 应用密钥

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

获取用户地理位置坐标

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

获取试试，注意浏览器的提示：点我试试！

发 HTTP 请求获取特定信息

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

请求地址

// 腾讯地图https://apis./ws/geocoder/v1/// 高德地图https://api./geocoder/v2/// 百度地图/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 = '///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./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./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 = '///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 的形式进行数据处理。