Gerald.Zhang 发表于 2024-9-9 15:10:06

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

本帖最后由 Gerald.Zhang 于 2024-9-9 16:16 编辑

逆地理信息

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

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

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

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

定位

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

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

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

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

资源引入

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


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

地图初始化

需要注意,高德地图对象在初始化时,需要明确容器的高度。因此,活字格中的范围模式与高度无法直接作用在地图对象中,所以需要我们在代码侧明文指定:
// 获取活字格的地图容器
const con = document.querySelector("div");
// 指定高度像素。该写法可以做到对 ios 平台的 safari 内核进行兼容
mapCellDiv.css('height', con.getBoundingClientRect().height + 'px');获取定位信息

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

在初始化属性中,插件提供了 needAddress 属性,开启后会在结果中返回逆地理信息。
AMap.plugin('AMap.Geolocation', function() {
    var geolocation = new AMap.Geolocation({
      enableHighAccuracy: true,
      timeout: 10000,
      buttonPosition:'RB',
      buttonOffset: new AMap.Pixel(10, 20),
      zoomToAccuracy: true,
      needAddress: true
    });
    map.addControl(geolocation);
    geolocation.getCurrentPosition(function(status,result){
      if(status=='complete'){
            onComplete(result)
      }else{
            onError(result)
      }
    });
});
插件提供了回调函数 getCurrentPosition(),便于我们对结果进行自定义处理。其中,经纬度信息对应的字段为:position。经纬度对应的逆地理信息对应的字段是:formattedAddress。
//解析定位结果
function onComplete(data) {
    let locationInfoDiv = $("div").find('label');
    let str = [];
    str.push('定位结果:' + data.position);
    str.push('定位类别:' + data.location_type);
    let position_de = data.formattedAddress;
    str.push('位置:' + position_de);
    str.push('详细信息:' + data.message);
    if (data.accuracy) {
      str.push('精度:' + data.accuracy + ' 米');
    }
    str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
    locationInfoDiv.html(str.join('<br>'));
}
当然,如果我们对于逆地理信息有自定义需求,也可以单独请求高德的逆地理接口来获取更为详细的地理信息。

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

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

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




页: [1]
查看完整版本: 基于高德地图的逆地理信息获取