在通过 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 来实现了。//解析百度地图返回的数据functionupdate_address_baidu(data){
update_address(data,$('#bd'));}//解析腾讯地图返回的数据functionupdate_address_tencent(data){
update_address(data,$('#tx'));}//解析高德地图返回的数据functionupdate_address_gaode(data){
update_address(data,$('#gd'));}//因为数据格式差不多，所以这里一并处理了functionupdate_address(data,ul){
ul.empty();
if(data.status===0||data.status==='1'){
varr=data.result||data.regeocode;
//POI是周边信息
(r.pois||[]).forEach(function(poi){
varall=(poi.name||poi.title)+'('+(poi.addr||poi.address)+')';
varli=$('
');
li.text(all);
ul.append(li);
});
}}//高德有个坑，不支持设定源坐标的类型//所以还得单独转换一下坐标functionupdate_address_gaode_coord(data){
if(data.status==='1'){
vars=data.locations;
varg=document.createElement('script');
g.src='///v3/geocode/regeo?key=93ebbbb772a24c6625def52e779dc38b&location='+s+'&extensions=all&callback=update_address_gaode'
$('#results').append(g);
}}//获取详细/特定信息，在获取到坐标后执行functionget_detail_location(lat,lng){
varresults=$('#results');
varbd=document.createElement('script');
bd.src='//api./geocoder/v2/?ak=uVQwCq4gtGAyQWmpDwLD7g9bGXRa6UFm&output=json&location='+lat+','+lng+'&coordtype=wgs84ll&pois=1&callback=update_address_baidu';
results.append(bd);
vartx=document.createElement('script');
tx.src='//apis./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);
//注意高德的经纬度参数与上面两个是相反的
vargd=document.createElement('script');
gd.src='///v3/assistant/coordinate/convert?key=93ebbbb772a24c6625def52e779dc38b&locations='+lng+','+lat+'&coordsys=gps&output=json&callback=update_address_gaode_coord'
results.append(gd);}functionget_my_addr(){
if('geolocation'innavigator){
navigator.geolocation.getCurrentPosition(
//若获取成功
function(position){
varlat=position.coords.latitude;//纬度
varlng=position.coords.longitude;//经度
get_detail_location(lat,lng);
},
//若获取失败
function(err){
alert('获取地理位置时遇到错误。');
},
//更多参数
{
enableHighAccuracy:true,//启用高精度获取
}
);
}
else{
alert('你的浏览器不支持地理位置服务。');
}}
输出结果：
腾讯地图：
高德地图：
百度地图：
一些说明
这里的密钥由于是在网页上使用，免不了被公开，所以请在管理后台设置好域名白名单等手段以防止被盗用。
坐标系统众多(GPS坐标，卫星坐标，百度地图坐标，腾讯地图坐标，高德地图坐标)，注意转换与参数顺序，否则会出现位置偏差。
由于 Google 无法访问，我就不用来举例了。同时，电脑端由于没有GPS/基站都设施，可能会仅使用IP作为判断标准(非常不精确)。
由于众多浏览器的地理位置服务器均为 Google 地图，所以如果电脑端浏览器开了代理，可能会出现不正确的实际地址。
除 Google 地图 API 以外的上述全部均不支持跨源访问，所以请全部使用 JSONP 的形式进行数据处理。
高德h5地图api接口_html5通过腾讯地图 高德地图 百度地图开发api接口获取坐标对应的周边信息...
