高德地图 React 组件使用教程

孙茹纳

于 2025-04-06 10:30:57 发布

阅读量469

点赞数 3

本文链接：https://blog.youkuaiyun.com/gitblog_00792/article/details/147022380

版权

高德地图 React 组件使用教程

react-amap 基于 React 封装的高德地图组件，帮助你轻松的接入地图到 React 项目中。项目地址: https://gitcode.com/gh_mirrors/rea/react-amap

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;