在React+ts中集成高德地图（保姆级教程）-Toy模板网

这篇具有很好参考价值的文章主要介绍了在React+ts中集成高德地图（保姆级教程）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一：申请高德key

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

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

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

进入我的应用：

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

创建新应用：

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

获取key和密钥：

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

二：在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