Vue 中使用高德地图API 获取地理位置+逆地理编码

库版本

package	version
vue	2.6.0
vant	2.12.6
@amap/amap-jsapi-loader	1.0.1

需求：

H5中获得用户位置授权后获取终端经纬度和地点名称，PC/移动端适用。

Action！

第一步：

引入高德API库：

import AMapLoader from '@amap/amap-jsapi-loader';

第二步：

添加插件，绘制地图

• AMap.Geocoder 地理编码与逆地理编码
• AMap.Geolocation 高德基于浏览器API的定位插件

<template>
	<section id="amapContainer" />
</template>

<script>
export default {
  name: 'AmapGeomaker',
  mounted() {
    AMapLoader.load({
      // 高德开发者密钥 ：平台申请
      key: AmapKey,
      // 高德API版本: 2.0
      version: AmapApiVersion,
      // 加载高德内置插件
      plugins: ['AMap.Geocoder', 'AMap.Geolocation']
    })
      .then((AMap) => {
        // 绘制地图
        const AMAP = new AMap.Map('amapContainer', {
          resizeEnable: true
        });

        // Geolocation 配置
        const OPTIONS = {
          // 设置定位超时时间，默认：无穷大
          timeout: 4000,
          // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true
        };

        const Geolocation = new AMap.Geolocation(OPTIONS);
        const Geocoder = new AMap.Geocoder();

        AMAP.addControl(this.geolocation);

        // 获取定位信息
        Geolocation.getCurrentPosition((status, result) => {
          const { status: statusCode, originMessage } = result;
          // 成功回调 status 返回0
          if (status === 'complete' && !statusCode) {
            // KL：高精度纬度
            // kT：高精度经度（注意大小写，高德返回 kT）
            const { position: { KL, kT } } = result;

            // 根据获取到的经纬度进行逆地理编码
            Geocoder.getAddress([KL, kT], (status, { regeocode }) => {
              if (status === 'complete' && regeocode) {
                // address即经纬度转换后的地点名称
                const address = regeocode?.formattedAddress;
              }
            });
          } else {
            // 失败回调 status 统一返回1
            switch (originMessage) {
              case 'Timeout expired':
                // 超时
                break;
              case 'User denied Geolocation':
                // 拒绝授权
                break;
              case 'error Network location provider at \'https://www.googleapis.com/\' : No response received.':
                // 不支持定位，定位不可用的浏览器
                break;
              default:
                // 其他错误
                return;
            }
          }
        });
      })
      .catch((err) => {
        console.error(err)
      });
  }
}
</script>

插件详细使用说明参考：

AMap.Geocoder
AMap.Geolocation

业务效果：

业务逻辑多，只抽离出一部分，如果在使用过程中遇到问题，欢迎留言~