高德接口调用-逆地理编码解析-纯前端js实现方案

话不多说，上步骤实现，先别问为啥，做就完事了。

实现手段上有两种，一种是script标签引入sdk（此处不做介绍），第二种使用高德AsMap包

1. 安装npm包

   npm i @amap/amap-jsapi-loader --save

    

2. 考虑复用性，建议封装成组件使用，故创建组件自定义文件

   import React, { useEffect, useState } from 'react';
   import AMapLoader from '@amap/amap-jsapi-loader';
   
   // 标注①：此处很重要，必配置
   window._AMapSecurityConfig = {
     securityJsCode: "标注②：你自己的安全密钥",
   };
   
   const BizGeocoder= () => {
     const [address, setAddress] = useState('');
     const [geocoder, setGeocoder] = useState(null);
   
     useEffect(() => {
   
   // html5方法调用获取经纬度，注意获得的经纬度需要截取保留小数点后六位，否则高德接口不支持
       if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(
           (position) => {
             const latitude = position.coords.latitude;  // 纬度
             const longitude = position.coords.longitude; // 经度
             console.log("纬度:", latitude);
             console.log("经度:", longitude);
           },
           (error) => {
             console.error("获取位置失败:", error.message);
           }
         );
       } else {
         console.error("浏览器不支持 Geolocation API");
       }
   
   
   
   // 初始化高德接口
   
       const initMap = async () => {
         try {
           const AMap = await AMapLoader.load({
             key: "标注③：你自己的key", // 高德测试Key
             version: "2.0",
             plugins: ['AMap.Geocoder'],
           });// 初始化地理编码器
           const geocoderInstance = new AMap.Geocoder({
             city: "全国"
           });
           setGeocoder(() => geocoderInstance); // 使用函数式更新确保引用正确
   
         } catch (error) {
           console.error('地图加载失败:', error);
         }
       };
   
       initMap();
   
     }, []);
   
     // 示例：逆地理编码方法
     const getReverseGeocode = (lnglat) => {
       if (!geocoder) return;
   
       geocoder.getAddress(lnglat, (status, result) => {
         if (status === 'complete' && result.regeocode) {
           setAddress(result.regeocode.formattedAddress);
         } else {
           console.error('逆地理编码失败:', result);
         }
       });
     };
   
     return (
       <div>
   // 此处我偷懒，经纬度地址应该换成你上述调取获得的东西，不应该写死的
         <button onClick={() => getReverseGeocode([120.178447, 30.315514])}>
           获取坐标地址
         </button>
         <div>解析结果：{address}</div>
       </div>
     );
   };
   
   export default BizGeocoder;

    

3. 解释一下上述几个备注，你要在高德地图开放平台上，注册成为开发者，然后创建应用，然后添加key，创建的key绑定的服务一定要是web端（jsSdk），这个是给前端用的，也是使用amap包时调用的服务，别选择web服务端。然后域名白名单，不配置就是默认随便一个都可以调用，不做限制。然后保存就可以看到生成了一个key和一个密钥code，把它塞到标注②和③那里
4. 这时候就可以引入这个组件获取地址信息了，非常粗略的版本，你要问我为什么我也不知道