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

收藏

本帖最后由 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[fgcname='mapCell']");
// 指定高度像素。该写法可以做到对 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[fgcname='locationCell']").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 在没有配置安全密钥时仍可以测试使用。但是在精度上会出现偏差，配置密钥完成后，精度就准确了。

		自动登录	找回密码
密码			立即注册

[解决方案] 基于高德地图的逆地理信息获取

0 个回复