【亲测免费】 高德地图 React 组件使用教程

高德地图 React 组件使用教程

1. 项目介绍

本项目是基于 React 封装的高德地图组件，目的是帮助开发者能够轻松地在 React 项目中接入地图功能。组件包括了地图基础功能，并且支持自定义扩展，以满足不同业务场景的需求。使用 TypeScript 编写，保证了类型安全，同时支持 React Hook，使得状态管理更加灵活。

2. 项目快速启动

首先，确保你的项目中已经安装了 React。然后，通过以下命令安装 @uiw/react-amap：

npm install @uiw/react-amap --save

或者，如果你需要按需加载，可以单独安装地图组件和 API 加载器：

npm install @uiw/react-amap-map @uiw/react-amap-api-loader --save

以下是一个简单的地图展示组件示例：

import React from 'react';
import { Map, APILoader } from '@uiw/react-amap';

const MapComponent = () => {
  return (
    <APILoader>
      <Map style={{ height: 400, width: 100% }} />
    </APILoader>
  );
};

export default MapComponent;

确保在 APILoader 组件中提供了高德地图的 akey（API 密钥）。

3. 应用案例和最佳实践

地图控件使用

你可以轻松地在地图上添加各种控件，例如比例尺、工具栏等：

import React from 'react';
import { Map, APILoader, ScaleControl,ToolBarControl } from '@uiw/react-amap';

const MapWithControls = () => {
  return (
    <APILoader>
      <Map style={{ height: 400, width: 100% }}>
        <ScaleControl position="LB" />
        <ToolBarControl position="RB" />
      </Map>
    </APILoader>
  );
};

export default MapWithControls;

自定义覆盖物

你可以添加自定义覆盖物到地图上，比如标记点：

import React from 'react';
import { Map, APILoader, Marker } from '@uiw/react-amap';

const MapWithMarker = () => {
  return (
    <APILoader>
      <Map style={{ height: 400, width: 100% }}>
        <Marker position={{ longitude: 116.397428, latitude: 39.90923 }} />
      </Map>
    </APILoader>
  );
};

export default MapWithMarker;

4. 典型生态项目

本项目是 uiw 组织下的一个子项目，uiw 组织还提供了其他与 React 相关的开源组件，例如：

• @uiw/react-baidu-map：基于 React 封装的百度地图组件。
• @uiw/react-pdf：用于在 React 中显示 PDF 文档的组件。

这些组件都遵循相似的 API 设计理念，使得开发者可以轻松迁移和复用代码。