使用react实现通过经纬度获取地址（地理/逆地理编码）-阿里云开发者社区

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

2024-01-17 154

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

首先先去高德开放平台申请申请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

oadlevel

道路等级

以下内容需要 extensions 参数为 all 时才生效。

可选值：0，1

当roadlevel=0时，显示所有道路

当roadlevel=1时，过滤非主干道路，仅输出主干道路数据

可选

无

sig

数字签名

请参考数字签名获取和使用方法

可选

无

utput

返回数据格式类型

可选输入内容包括：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顺序。

可选

返回结果参数说明

逆地理编码的响应结果的格式由请求参数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	社区名称	例如：北京大学	name
	type	POI类型	例如：科教文化服务;学校;高等院校	type
	building		楼信息列表
		name	建筑名称	例如：万达广场
		type	类型	例如：科教文化服务;学校;高等院校
	streetNumber		门牌信息列表
		street	街道名称	例如：中关村北二条
		number	门牌号	例如：3号
		location	坐标点	经纬度坐标点：经度，纬度
		direction	方向	坐标点所处街道方位
		distance	门牌地址到请求坐标的距离	单位：米
	seaArea		所属海域信息	例如：渤海
	businessAreas		经纬度所属商圈列表
	businessArea	商圈信息		businessArea
	location	商圈中心点经纬度		location
	name	商圈名称	例如：颐和园	name

			id	商圈所在区域的adcode	例如：朝阳区/海淀区
	roads			道路信息列表	请求参数 extensions 为 all 时返回如下内容

oad		道路信息
	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 类型