# @ant-design/maps 中文文档

规范地址：https://npmcn.com/package/%40ant-design/maps/

版本：1\.0\.8
npm 元数据更新时间：2024-09-25T06:01:22.763Z
中文译文更新时间：2026-11-06T06:01:24.268Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/maps
原文对照：https://npmcn.com/package/%40ant-design/maps/?lang=original
项目主页：https://github.com/ant-design/ant-design-charts#readme
源码仓库：https://github.com/ant-design/ant-design-charts

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：10.6 MB，77 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react \>=16\.8\.4，react-dom \>=16\.8\.4
- 首次发布：2021-11-17T12:20:07.986Z
- 最新版本发布：2023-11-27T13:02:44.201Z
- 近 30 天下载量：69321（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 0 个）

## 中文简介

地图

## 安装

```sh
npm install @ant-design/maps
```

也可以使用：`pnpm add @ant-design/maps`、`yarn add @ant-design/maps`、`bun add @ant-design/maps`

## README

# @ 蚂蚁设计/图

基于 [L7 绘图](https://github.com/antvis/L7Plot)。 。 。 .

![npm](https://img.shields.io/npm/v/@ant-design/maps) ![npm](https://img.shields.io/npm/dm/@ant-design/maps) [![GitHub stars](https://img.shields.io/github/stars/ant-design/ant-design-charts)](https://github.com/ant-design/ant-design-charts/stargazers) [![npm License](https://img.shields.io/npm/l/@ant-design/charts.svg)](https://www.npmjs.com/package/@ant-design/charts)

[网站](https://charts.ant.design/) 二. 支助 [快速启动](https://charts.ant.design/en/docs/manual/getting-started) 二. 支助 [图片库](https://charts.ant.design/en/examples/gallery) 二. 支助 [财务问题](https://charts.ant.design/en/docs/manual/faq) 二. 支助 [博客](https://www.yuque.com/antv/g2plot)

## 大小写

![](https://gw.alipayobjects.com/zos/antfincdn/xX10CNIu4b/8a064058-518e-4860-af54-58ca17cae985.png) ![](https://gw.alipayobjects.com/zos/antfincdn/wRiG4Cl1tB/9c40912e-13f2-42c6-a580-e86160b35962.png) ![](https://gw.alipayobjects.com/zos/antfincdn/tX2zfzui76/821b3d1d-421c-4f09-a44e-53422db302f6.png)

![](https://gw.alipayobjects.com/zos/antfincdn/qgKi3OxQVE/4553729d-c2ce-490b-aebb-ea948bef7f2e.png) ![](https://gw.alipayobjects.com/zos/antfincdn/fA50QqeP%24T/a5031ad0-7786-4183-bf23-e66dbdf52fe5.png) ![](https://gw.alipayobjects.com/zos/antfincdn/t5BQDH5Jp8/dbcddc7e-5ff9-4d3b-af9b-2d86f40b626a.png)

## \* 特性

-   易于使用
-   类型脚本

## \* 安装

```bash
$ npm install @ant-design/maps
```

## 使用量

```tsx
import React, { useState, useEffect } from 'react';
import { AreaMap } from '@ant-design/maps';

const DemoAreaMap = () => {
  const [data, setData] = useState({ type: 'FeatureCollection', features: [] });

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/d6da7ac1-8b4f-4a55-93ea-e81aa08f0cf3.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    map: {
      type: 'mapbox',
      style: 'blank',
      center: [120.19382669582967, 30.258134],
      zoom: 3,
      pitch: 0,
    },
    source: {
      data: data,
      parser: {
        type: 'geojson',
      },
    },
    autoFit: true,
    color: {
      field: 'adcode',
      value: ['rgb(239,243,255)', 'rgb(189,215,231)', 'rgb(107,174,214)', 'rgb(49,130,189)', 'rgb(8,81,156)'],
      scale: {
        type: 'quantile',
      },
    },
    style: {
      opacity: 1,
      stroke: 'rgb(93,112,146)',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    state: {
      active: true,
    },
    label: {
      visible: true,
      field: 'name',
      style: {
        fill: '#000',
        opacity: 0.8,
        fontSize: 10,
        stroke: '#fff',
        strokeWidth: 1.5,
        textAllowOverlap: false,
        padding: [5, 5],
      },
    },
    tooltip: {
      items: ['name', 'adcode'],
    },
    zoom: {
      position: 'bottomright',
    },
    legend: {
      position: 'bottomleft',
    },
  };

  return <AreaMap {...config} />;
};

export default DemoAreaMap;
```

## & API 文档

参见图表 API [细节](https://charts.ant.design/zh/docs/map-api/plot-api)。常见道具:

| 财产 | 说明 | 类型 | 默认值 |
| :-- | :-- | :-- | :-- |
| 准备 | 已装入图表的回调 | (图) 空出 | \- 说吧 |
| 装入 | 装入状态 | 布尔 | \- 说吧 |
| 装入模板 | 装入模板 | 反应 反应元素 | \- 说吧 |
| 模板 | 自定义错误模板 | (e:出错) 反应 反应节点 | \- 说吧 |
| 类Name | 集装箱类别 | 字符串 | \- 说吧 |
| 容器样式 | 容器样式 | 反应 CSS 财产 | \- 说吧 |

## 如何贡献

你的贡献总是受欢迎的! 请 有看到一个 [问题](https://github.com/ant-design/ant-design-charts/issues) 先说.

## 联系我们

DingTalk 组号 : `44788198` 。 。 。 .

![](https://gw.alipayobjects.com/zos/antfincdn/bi1LxWeIEj/32f85bbf-a06e-4046-96e5-417126bffeaf.png)

## 许可证

麻省理工学院

## 常见问题

### @ant-design/maps 是什么？

地图

### 如何安装 @ant-design/maps？

在项目目录运行 npm install @ant-design/maps，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.8\.4）、react-dom（\>=16\.8\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/maps 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/maps 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/maps 可以商用吗？

@ant-design/maps 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/maps 的下载量有多少？

根据 npm 官方下载统计，@ant-design/maps 在 2026/10/06 – 2026/11/04 这 30 天内被下载 69,321 次，日均约 2,311 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/maps 还在维护吗？

最新版本 1\.0\.8 发布于 2023/11/27（2 年前）；至今共发布 17 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/11/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。