React引入高德地图方法

1.权限问题

首先需要前往高德地图官网注册账号 lbs.amap.com/ ，然后前往 console.amap.com/dev/key/app 创建新应用，如下图：

这时可以获取它的key和安全密钥 注意lbs.amap.com/api/javascr… 提到 （ 自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用) 安全密钥可以放在根文件index.html的head标签内，代码如下

<script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: '你的安全密钥',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key">

否则在使用高德的API时报错

2.导入地图

uiw.gitee.io/react-amap/… 这里时高德基于react的使用方法，一下代码组件的使用方法在该链接中都有介绍 以下代码涉及到了

1. 导入高德地图
2. gps坐标转为高德坐标的转换方法
3. Mark标签和Circle标签的使用方法

function DataStatistics() {
  
  return (
      <div className="container">
      //导入高德地图  akay是注册后生成的key，这样APILoader和Map标签可以把地图导入
        <APILoader akay="6d2170bf86d80c3b2b84ca153cdbe1c2">
          <Map>
            <Example show={show} />
            <CircleLocation/>
          </Map>
        </APILoader>
      </div>
  );
}
//Mark标签 用于标记地点
const Example = (props) => {
  const [state, setState] = useState([114.35444549850463, 30.540165291558274]);
//convertFrom为GPS坐标转换函数，可以将gps坐标转为高德
  useEffect(() => {
    window.AMap.convertFrom(state, "gps", function (state, result) {
      setState([result.locations[0].getLng(), result.locations[0].getLat()]);
    });
  }, []);

  return (
    <Marker title="北京市" position={state} onClick={props.show} children="" />
  );
};
//Circle标签 用于在指定区域生成圆
const CircleLocation = () => {
  const [circleState, setStateCircle] = useState([114.35444549850463, 30.540165291558274]);

  useEffect(() => {
    window.AMap.convertFrom(circleState, "gps", function (state, result) {
      setStateCircle([result.locations[0].getLng(), result.locations[0].getLat()]);
    });
  }, []);
  return (
    <Circle
      visiable={true}
      radius={1000}
      strokeColor="#fff"
      strokeWeight={2}
      center={new window.AMap.LngLat(...circleState)}
    />
  );
};