一：申请高德key

去高德官网去创建一个属于自己的地图应用（得到key和秘钥）。

首先，我们要注册一个开发者账号，根据实际情况填写，身份写个人：

进入我的应用：

创建新应用：

获取key和密钥：

二：在React+ts中集成高德地图（amap-jsapi-loader）

这里使用的是amap-jsapi-loader 。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API，并提供了一些方便的配置选项和回调函数，以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库，如React、Vue、Angular等。

1、安装依赖：在终端中使用npm或yarn安装`amap-jsapi-loader`依赖项。

运行以下命令：

npm i @amap/amap-jsapi-loader

2、创建一个React组件：

创建一个React组件来容纳加载高德地图的逻辑。在您的项目中创建一个新的文件（例如AMapExample.tsx），然后在文件中编写以下代码：

import React, { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';const AMapExample = () => {useEffect(() => {AMapLoader.load({"key": "你申请的key",   // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": []  //插件列表}).then((AMap) => {let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的idzoom: 15, //初始化地图层级center: [112.5266, 27.91507] //初始化地图中心点});// 标记let marker = new AMap.Marker({position: [112.5266, 27.91507] // 基点位置});// 地图添加标记amap.add(marker);}).catch(e => {console.log(e);})}, []);return (<div id="mapContainer" style={{ width: '100%', height: '400px' }}></div>);
};export default AMapExample;

3、在需要使用高德地图的地方引入该组件：

在你的其他React组件中引入AMapExample组件，并在需要显示地图的地方使用它。例如：

import React from 'react'
import AMapExample from '../../../components/Amap'
const ShowMap:React.FC = () => {return (<div>展示地图<AMapExample></AMapExample></div>)
}export default ShowMap