使用react实现通过经纬度获取地址（地理/逆地理编码）

我使用的是高德地图的开放平台实现的

首先先去高德开放平台申请申请Web服务API类型key

直接上代码

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const AddAddress = () => {
  // 坐标
  const [position, setPosition] = useState(null);
  // 位置
  const [address, setAddress] = useState("");
  useEffect(() => {
    if (navigator.geolocation) {
      // 通过浏览器获取位置
      navigator.geolocation.getCurrentPosition(setPosition);
    } else {
      // 此浏览器不支持地理位置
      console.log("Geolocation is not supported by this browser.");
    }
  }, []);

  const handleClick =async () => {
    // 根据坐标获取地址
    const wz =await axios.get(
      'https://restapi.amap.com/v3/geocode/regeo?key=你的key&location='+position.coords.longitude+','+position.coords.latitude
      );
    console.log(wz.data);
    setAddress(wz.data.regeocode.formatted_address);
  };
  return (
    <div>
      {position ? (
        <>
          <p>当前位置：</p>
          <p>{position.coords.latitude}, {position.coords.longitude}</p>
        </>
      ) : (
        <p>正在获取当前位置...</p>
      )}
      <div className='sp'>
        <button onClick={()=>handleClick()}>获取定位</button>
        {address ? (
        <>
          <p>当前位置：</p>
          <p>{address}</p>
        </>
      ) : (
        <p>正在获取当前位置...</p>
      )}
      </div>
    </div>
  );
};

export default AddAddress;

逆地理编码

地理编码API服务地址

URL	https://restapi.amap.com/v3/geocode/regeo?parameters
请求方式	GET

parameters代表的参数包括必填参数和可选参数。所有参数均使用和号字符(&)进行分隔。下面的列表枚举了这些参数及其使用规则。

请求参数

参数名		含义	规则说明	是否必须	缺省值
key		高德Key	用户在高德地图官网申请Web服务API类型Key	必填	无
location		经纬度坐标	传入内容规则：经度在前，纬度在后，经纬度间以“,”分割，经纬度小数点后不要超过 6 位。	必填	无
poitype		返回附近POI类型	以下内容需要 extensions 参数为 all 时才生效。 逆地理编码在进行坐标解析之后不仅可以返回地址描述，也可以返回经纬度附近符合限定要求的POI内容（在 extensions 字段值为 all 时才会返回POI内容）。设置 POI 类型参数相当于为上述操作限定要求。参数仅支持传入POI TYPECODE，可以传入多个POI TYPECODE，相互之间用“|”分隔。获取 POI TYPECODE 可以参考POI分类码表	可选	无
radius		搜索半径	radius取值范围在0~3000，默认是1000。单位：米	可选	1000
extensions		返回结果控制	extensions 参数默认取值是 base，也就是返回基本地址信息； extensions 参数取值为 all 时会返回基本地址信息、附近 POI 内容、道路信息以及道路交叉口信息。	可选	base
roadlevel		道路等级	以下内容需要 extensions 参数为 all 时才生效。 可选值：0，1 当roadlevel=0时，显示所有道路 当roadlevel=1时，过滤非主干道路，仅输出主干道路数据	可选	无
sig		数字签名	请参考数字签名获取和使用方法	可选	无
output		返回数据格式类型	可选输入内容包括：JSON，XML。设置 JSON 返回结果数据将会以JSON结构构成；如果设置 XML 返回结果数据将以 XML 结构构成。	可选	JSON
callback		回调函数	callback 值是用户定义的函数名称，此参数只在 output 参数设置为 JSON 时有效。	可选	无
homeorcorp		是否优化POI返回顺序	以下内容需要 extensions 参数为 all 时才生效。 homeorcorp 参数的设置可以影响召回 POI 内容的排序策略，目前提供三个可选参数： 0：不对召回的排序策略进行干扰。 1：综合大数据分析将居家相关的 POI 内容优先返回，即优化返回结果中 pois 字段的poi顺序。 2：综合大数据分析将公司相关的 POI 内容优先返回，即优化返回结果中 pois 字段的poi顺序。	可选	0

返回结果参数说明

逆地理编码的响应结果的格式由请求参数output指定。

名称				含义	规则说明
status				返回结果状态值	返回值为 0 或 1，0 表示请求失败；1 表示请求成功。
info				返回状态说明	当 status 为 0 时，info 会返回具体错误原因，否则返回“OK”。详情可以参考 info状态表
regeocode				逆地理编码列表	返回 regeocode 对象；regeocode 对象包含的数据如下：
	addressComponent			地址元素列表
		country		坐标点所在国家名称	例如：中国
		province		坐标点所在省名称	例如：北京市
		city		坐标点所在城市名称	请注意：当城市是省直辖县时返回为空，以及城市为北京、上海、天津、重庆四个直辖市时，该字段返回为空；省直辖县列表
		citycode		城市编码	例如：010
		district		坐标点所在区	例如：海淀区
		adcode		行政区编码	例如：110108
		township		坐标点所在乡镇/街道（此街道为社区街道，不是道路信息）	例如：燕园街道
		towncode		乡镇街道编码	例如：110101001000
		neighborhood		社区信息列表
			name	社区名称	例如：北京大学
			type	POI类型	例如：科教文化服务;学校;高等院校
		building		楼信息列表
			name	建筑名称	例如：万达广场
			type	类型	例如：科教文化服务;学校;高等院校
		streetNumber		门牌信息列表
			street	街道名称	例如：中关村北二条
			number	门牌号	例如：3号
			location	坐标点	经纬度坐标点：经度，纬度
			direction	方向	坐标点所处街道方位
			distance	门牌地址到请求坐标的距离	单位：米
		seaArea		所属海域信息	例如：渤海
		businessAreas		经纬度所属商圈列表
			businessArea	商圈信息
			location	商圈中心点经纬度
			name	商圈名称	例如：颐和园
			id	商圈所在区域的adcode	例如：朝阳区/海淀区
	roads			道路信息列表	请求参数 extensions 为 all 时返回如下内容
		road		道路信息
			id	道路id
			name	道路名称
			distance	道路到请求坐标的距离	单位：米
			direction	方位	输入点和此路的相对方位
			location	坐标点
	roadinters			道路交叉口列表	请求参数 extensions 为 all 时返回如下内容
		roadinter		道路交叉口
			distance	交叉路口到请求坐标的距离	单位：米
			direction	方位	输入点相对路口的方位
			location	路口经纬度
			first_id	第一条道路id
			first_name	第一条道路名称
			second_id	第二条道路id
			second_name	第二条道路名称
	pois			poi信息列表	请求参数 extensions 为 all 时返回如下内容
		poi		poi信息列表
			id	poi的id
			name	poi点名称
			type	poi类型
			tel	电话
			distance	该POI的中心点到请求坐标的距离	单位：米
			direction	方向	为输入点相对建筑物的方位
			address	poi地址信息
			location	坐标点
			businessarea	poi所在商圈名称
	aois			aoi信息列表	请求参数 extensions 为 all 时返回如下内容
		aoi		aoi信息
			id	所属 aoi的id
			name	所属 aoi 名称
			adcode	所属 aoi 所在区域编码
			location	所属 aoi 中心点坐标
			area	所属aoi点面积	单位：平方米
			distance	输入经纬度是否在aoi面之中	0，代表在aoi内 其余整数代表距离AOI的距离
			type	所属 aoi 类型

原文地址：地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API