在React+ts中集成高德地图（保姆级教程）

前往高德地图开发平台高德开放平台 | 高德地图API

一：申请高德key

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

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

进入我的应用：

创建新应用：

获取key和密钥：

扫描二维码关注公众号，回复： 16921923 查看本文章

二：在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为容器的id
                zoom: 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

4、运行应用程序：

使用你喜欢的方法（如npm start或yarn start）运行您的React应用程序，并查看高德地图在页面上显示出来。

这是一个在react+ts项目中使用高德地图基本的示例，我们可以根据需求进行更多的定制和配置。

amap-jsapi-loader还提供了其他功能，比如按需加载插件、异步加载等，具体我们可以参考文档：JS API JS API 结合React使用