# @changey/react-leaflet-markercluster 中文文档

规范地址：https://npmcn.com/package/%40changey/react-leaflet-markercluster/

版本：4\.0\.0-rc1
npm 元数据更新时间：2022-06-20T21:48:21.649Z
中文译文更新时间：2026-11-09T10:17:45.676Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：400 kB，29 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：4 个
- peer 依赖：leaflet ^1\.8\.0，leaflet\.markercluster ^1\.5\.3，react-leaflet ^4\.0\.0
- 首次发布：2022-06-20T21:48:21.287Z
- 最新版本发布：2022-06-20T21:48:21.518Z
- 近 30 天下载量：29963（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

反应- laeflet 的回放包装器。 marker 集群

## 安装

```sh
npm install @changey/react-leaflet-markercluster
```

也可以使用：`pnpm add @changey/react-leaflet-markercluster`、`yarn add @changey/react-leaflet-markercluster`、`bun add @changey/react-leaflet-markercluster`

## README

# 反应传单标记组

[![npm](https://img.shields.io/npm/v/react-leaflet-markercluster.svg)](https://www.npmjs.com/package/react-leaflet-markercluster) [![Code Climate](https://codeclimate.com/github/YUzhva/react-leaflet-markercluster/badges/gpa.svg)](https://codeclimate.com/github/YUzhva/react-leaflet-markercluster) [![npm](https://img.shields.io/npm/dm/react-leaflet-markercluster.svg)](https://www.npmjs.com/package/react-leaflet-markercluster) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=plastic)](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-license)

反应包装 [Leaflet.marker 分组](https://github.com/Leaflet/Leaflet.markercluster) 页:1 [反应-叶片](https://github.com/PaulLeCam/react-leaflet)

![React leaflet markercluster](https://npmcn.com/package/%40changey/react-leaflet-markercluster/preview.png)

**文件的例子:** [https://yuzhva.github.io/ react-leaflet-marker 集束地/](https://yuzhva.github.io/react-leaflet-markercluster/)  
**[开始代码箱](https://codesandbox.io/s/react-leaflet-markercluster-getting-started-9binx)**

# 说明

如果在地图缩放时遇到标记重叠的问题,或者它们重叠 相互重叠,因为彼此关系密切 - 你可能需要将它们分组.  
这是你可以做的 **反应-叶-标记集群**。 。 。 .

拿着你的标记进去 `<MarkerClusterGroup />` 组件,紧接着 `<TileLayer />`数字 :

```javascript
import MarkerClusterGroup from 'react-leaflet-markercluster';

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;
```

> **注:在开始前,请参见这些有用的指南:**
> 
> -   [传单快速启动指南](http://leafletjs.com/examples/quick-start/)。 。 。 .
> -   [反应-叶片安装](https://react-leaflet.js.org/docs/en/installation.html)。 。 。 .

# 目录

-   [开始](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-getting-started)
-   [API 密码](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-api)
-   [如何运行 DEV env](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-how-to-run-dev-env)
-   [贡献者](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-contributors-)
-   [捐款](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40changey/react-leaflet-markercluster/#readme-license)

# 开始

**1\. 联合国.** 安装软件包 :

```bash
yarn add react-leaflet-markercluster@next # yarn
npm install react-leaflet-markercluster # npm
```

**注:** 页:1 `@next` 用于 **反应- 叶子 v3** 支助。 如果您仍在使用反应叶 v3, 添加依赖性为 `react-leaflet-markercluster@^2.x.x`

这个 `react-leaflet-markercluster` 需求 `leaflet.markercluster` 作为 [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)

(传单和反应叶也应予以安装)

```bash
yarn add leaflet.markercluster leaflet react-leaflet # yarn
npm install leaflet.markercluster leaflet react-leaflet # npm
```

**2\. 联合国.** 导入 **标记集群** 财务报告和审定财务报表 **传单** 样式 :

```javascript
@import '~leaflet/dist/leaflet.css'; // sass
@import '~react-leaflet-markercluster/dist/styles.min.css'; // sass

require('~leaflet/dist/leaflet.css'); // inside .js file
require('react-leaflet-markercluster/dist/styles.min.css'); // inside .js file
```

或者包括直接到 HTML 文件头的 CSS 样式 :

```html
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<link
  rel="stylesheet"
  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
/>
```

**3个.** 写一些简单的 `react-leaflet` 地图 :

```javascript
import { MapContainer, TileLayer, Marker } from 'react-leaflet';

<MapContainer
  className="markercluster-map"
  center={[51.0, 19.0]}
  zoom={4}
  maxZoom={18}
>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MapContainer>;
```

**注:** 记住要添加地图样式 `.markercluster-map { height: 90vh; }`。 。 。 .

**4.四.** 拿着你的标记进去 `<MarkerClusterGroup />` 组件,紧接着 `<TileLayer />`数字 :

```javascript
import MarkerClusterGroup from 'react-leaflet-markercluster';

<MarkerClusterGroup>
  <Marker position={[49.8397, 24.0297]} />
  <Marker position={[52.2297, 21.0122]} />
  <Marker position={[51.5074, -0.0901]} />
</MarkerClusterGroup>;
```

[文档中的更多实例](https://yuzhva.github.io/react-leaflet-markercluster/)  
[开始代码箱](https://codesandbox.io/s/react-leaflet-markercluster-getting-started-9binx)

# API 密码

随便你选什么 [所有 Leaflet.marker 集群选项](https://github.com/Leaflet/Leaflet.markercluster#all-options) 改为 `MarkerClusterGroup` 作为 `prop`。 。 。 .

例如:

```javascript
<MarkerClusterGroup showCoverageOnHover={false} />
```

或:

```javascript
const createClusterCustomIcon = function (cluster) {
  return L.divIcon({
    html: `<span>${cluster.getChildCount()}</span>`,
    className: 'marker-cluster-custom',
    iconSize: L.point(40, 40, true),
  });
}

<MarkerClusterGroup iconCreateFunction={createClusterCustomIcon} />
```

P.S: v1 的实例见 [变动情况](https://npmcn.com/package/%40changey/react-leaflet-markercluster/CHANGELOG.md#v118)

### 活动听众

您可以添加任何听众, 由 Leaflet 支持, 简单 `on` 属性前缀.

# 如何运行 DEV env

**1\. 联合国.** 克隆还原器 :

```bash
git clone https://github.com/YUzhva/react-leaflet-markercluster.git
```

**2\. 联合国.** 安装所有依赖 :

```bash
yarn install --no-lockfile # yarn
npm install # npm
```

**3个.** 启动服务器 :

```bash
yarn dev # yarn
npm run dev # npm
```

**4.四.** 在启动服务器后,故事本应该自动打开以下地址:

```
http://localhost:8080/
```

# 贡献者

感谢这些优秀的人: [![](https://contributors-img.web.app/image?repo=yuzhva/react-leaflet-markercluster) ](https://github.com/yuzhva/react-leaflet-markercluster/graphs/contributors)阿凡达人 [贡献者-img](https://contributors-img.web.app/)。 。 。 .

**特别感谢:**

-   [@webcarrot (英语)](https://github.com/webcarrot) 页:1 [反应- 叶片 v2 支持](https://github.com/yuzhva/react-leaflet-markercluster/issues/71#issuecomment-403071677)
-   [@CodeCutterUK (英语)](https://github.com/CodeCutterUK) 页:1 [反应- 叶片 v3 支持](https://github.com/yuzhva/react-leaflet-markercluster/pull/124)

# 捐款

所有来源都放在 `./src` 文件夹 :

**1\. 联合国.** 叉取还相.

**2\. 联合国.** 编辑 `react-leaflet-markercluster.js` 插头或 `style.scss` 样式文件.

**3个.** 提交更改并打开拉动请求 .

:比尔: **谢谢你的贡献** :比尔:

# UMD 图像

可在 [(单位:公斤)](https://unpkg.com/)数字 :

```html
<!-- unpkg, production code (minified) -->
<script src="https://unpkg.com/react-leaflet-markercluster/dist/index.js"></script>
<!-- unpkg, development code -->
<script src="https://unpkg.com/react-leaflet-markercluster/src/react-leaflet-markercluster.js"></script>

<!-- unpkg, production styles (minified) -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css"
/>
<!-- unpkg, development styles -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/react-leaflet-markercluster/src/styles.scss"
/>
```

# 许可证

麻省理工学院执照,见 [自由主义](https://github.com/YUzhva/react-leaflet-markercluster/blob/master/LICENSE) 文档.

## 常见问题

### @changey/react-leaflet-markercluster 是什么？

反应- laeflet 的回放包装器。 marker 集群

### 如何安装 @changey/react-leaflet-markercluster？

在项目目录运行 npm install @changey/react-leaflet-markercluster，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：leaflet（^1\.8\.0）、leaflet\.markercluster（^1\.5\.3）、react-leaflet（^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @changey/react-leaflet-markercluster 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/changey\_\_react-leaflet-markercluster 是否存在。

### @changey/react-leaflet-markercluster 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @changey/react-leaflet-markercluster 可以商用吗？

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

### @changey/react-leaflet-markercluster 的下载量有多少？

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

### @changey/react-leaflet-markercluster 还在维护吗？

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