基于高德地图的逆地理信息获取

逆地理信息

在涉及到定位场景的需求中，往往会存在获取当前定位的位置信息。比如将当前位置用作签到的地点标注、照片的水印等。通过经纬度来获取地理位置信息，这个过程被称为逆地理信息获取。

在逆地理信息获取的过程中，我们需要做两件事：

1. 获得当前位置的经纬度信息；
2. 通过经纬度查询到当前位置的地理信息。

我们需要分别做好相应的操作，才能获得最终的位置名称。

定位

在活字格中如何定位，其实论坛和市场中已经有非常多的资料可供参考。这里我为大家做一个系统性的归纳。目前定位的技术分两种，分别是基于 IP 的定位，以及基于卫星的定位。其中

• 基于卫星的定位，通俗来说就是咱们俗称的 GPS（国外的卫星） 定位，国内现在也逐步全面切换成基于北斗（国内的卫星）的定位。这种定位方式需要依赖于设备本身的硬件，因此定位精度十分准确，但是对于设备依赖较高。不过绝大多数的移动设备，都包含了定位硬件模块。
• 基于 IP 的定位。对于 PC（电脑设备） 来说，一般都不包含定位硬件，所以在 PC 上，定位需要通过网络分配的 IP 来进行获取。这种方式对于硬件没有任何依赖，但是在精度上相比基于卫星的定位偏差较大。
  

为了更好的适应 web 应用化的趋势，各大地图服务厂商都提供了基于浏览器API的 浏览器定位服务。这种服务在基于 IP 定位的基础上做了位置上的调优，使得精度要比基于 IP 的定位要准确许多，在大多数场景中，几乎可以媲美卫星定位。因此，在活字格中，我们也优先选择基于浏览器定位的方式，也是本文主要介绍的内容。如果您的场景对于定位精度有着非常高的准确性要求，请考虑使用移动端原生 APP 的方式来使用基于卫星的定位。

本文使用的地图服务是高德地图。因为要为大家讲解一些实际实现的技术细节，所以本文并未使用葡萄城市场中的高德地图插件，而是直接对接高德平台。

资源引入

在使用高德服务之前，我们需要在高德的开发者平台去注册应用，从而获得服务的 key 与 安全密钥。获取方式可以参考插件说明。
获得 key 与安全密钥后，可在工程文件中构建相应的资源引入，详情见下图

将必要的资源引入后，我们就可以初始化地图对象，所有的逻辑都在组件 c-amap 中的「页面加载命令」中。

地图初始化

需要注意，高德地图对象在初始化时，需要明确容器的高度。因此，活字格中的范围模式与高度无法直接作用在地图对象中，所以需要我们在代码侧明文指定：

1. // 获取活字格的地图容器
   
2. const con = document.querySelector("div[fgcname='mapCell']");
   
3. // 指定高度像素。该写法可以做到对 ios 平台的 safari 内核进行兼容
   
4. mapCellDiv.css('height', con.getBoundingClientRect().height + 'px');

复制代码

获取定位信息

api 中提供了插件 AMap.Geolocation，用来获取定位信息，这个插件默认会优先使用浏览器定位，如果定位失败，则会切换成 IP 定位。

在初始化属性中，插件提供了 needAddress 属性，开启后会在结果中返回逆地理信息。

1. AMap.plugin('AMap.Geolocation', function() {
   
2.     var geolocation = new AMap.Geolocation({
   
3.         enableHighAccuracy: true,
   
4.         timeout: 10000,
   
5.         buttonPosition:'RB',
   
6.         buttonOffset: new AMap.Pixel(10, 20),
   
7.         zoomToAccuracy: true,
   
8.         needAddress: true
   
9.     });
   
10.     map.addControl(geolocation);
    
11.     geolocation.getCurrentPosition(function(status,result){
    
12.         if(status=='complete'){
    
13.             onComplete(result)
    
14.         }else{
    
15.             onError(result)
    
16.         }
    
17.     });
    
18. });

复制代码

插件提供了回调函数 getCurrentPosition()，便于我们对结果进行自定义处理。其中，经纬度信息对应的字段为：position。经纬度对应的逆地理信息对应的字段是：formattedAddress。

1. //解析定位结果
   
2. function onComplete(data) {
   
3.     let locationInfoDiv = $("div[fgcname='locationCell']").find('label');
   
4.     let str = [];
   
5.     str.push('定位结果：' + data.position);
   
6.     str.push('定位类别：' + data.location_type);
   
7.     let position_de = data.formattedAddress;
   
8.     str.push('位置：' + position_de);
   
9.     str.push('详细信息：' + data.message);
   
10.     if (data.accuracy) {
    
11.         str.push('精度：' + data.accuracy + ' 米');
    
12.     }
    
13.     str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
    
14.     locationInfoDiv.html(str.join('<br>'));
    
15. }

复制代码

当然，如果我们对于逆地理信息有自定义需求，也可以单独请求高德的逆地理接口来获取更为详细的地理信息。

在定位这个场景中，地图服务厂商其实已经做了大量的工作。作为开发者，我们可以直接借助于 API 开箱即用。工程文件已经放在附件中，大家可以自行参考学习。为了保证移动和 PC 的共同使用，所有逻辑都维护在了组件中，方便复用。

在本文的最后，有两个小细节需要注意：

• 定位本身会涉及到隐私安全，所以您的服务需要设置为 https。
• 高德的 JSAPI 在没有配置安全密钥时仍可以测试使用。但是在精度上会出现偏差，配置密钥完成后，精度就准确了。