关于React接入高德地图的流程

高德地图接入（React）

一、新建高德应用，创建Key

1、先进入高德地图观望，然后进入控制台页面，进入”我的应用“面板，点击创建应用，填写完应用名称及应用类型之后，点击新建即可；

2、找到刚刚创建的应用，点击‘添加Key’，弹窗的面板中，填写‘Key名称’，勾选上‘Web端（JS API）服务’即可；

3、创建成功后，你就能看到一条新的Key匹配条目，这两个Key都需要在初始化高德地图的时候用到

二、在React页面接入高德地图

1、然后我们来到React页面，初始化高德地图应用，高德地图的初始化必须要在dom节点渲染完成之后进行，否则部分api会失效；这里，我们创建一个index.tsx文件，声明一个div，赋值id='container'，然后设置样式把该div撑开，Panel是我们用于封装跟高德地图交互的组件（比如顶部搜索栏，绘制区域... ..）

import React from 'React';
import Panel from './component/panel';
import styles from './style.css';

const GaodeMap: React.FC = () => {
  return (
    <>
      <div id='container' style={{ height: '100%', width: '100%' }}></div>
      <Panel />
    </>
  );
};

export default GaodeMap;