高德接口调用-逆地理编码解析-纯前端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", // 高德测试Keyversion: "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. 这时候就可以引入这个组件获取地址信息了，非常粗略的版本，你要问我为什么我也不知道