# @bluehalo/ngx-leaflet-markercluster 中文文档

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

版本：22\.0\.0
npm 元数据更新时间：2026-06-16T00:03:25.791Z
中文译文更新时间：2026-11-08T08:30:40.438Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：24 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common 22，@angular/core 22，@bluehalo/ngx-leaflet 22，leaflet 1，leaflet\.markercluster 1
- 首次发布：2024-06-01T20:42:43.035Z
- 最新版本发布：2026-06-16T00:03:25.548Z
- 近 30 天下载量：79158（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 4 个）

## 中文简介

Leaflet Marker 集群插件的 Angular.io 组件

## 安装

```sh
npm install @bluehalo/ngx-leaflet-markercluster
```

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

## README

# @ bluehalo/ngx-leaflet-marker 分组

[![NPM version](https://img.shields.io/npm/v/%40bluehalo%2Fngx-leaflet-markercluster)](https://www.npmjs.com/package/@bluehalo/ngx-leaflet-markercluster) [![Build Status](https://github.com/bluehalo/ngx-leaflet-markercluster/actions/workflows/ci.yml/badge.svg)](https://github.com/bluehalo/ngx-leaflet-markercluster/actions/workflows/ci.yml) [![Code Coverage](https://codecov.io/gh/bluehalo/ngx-leaflet-markercluster/graph/badge.svg)](https://codecov.io/gh/bluehalo/ngx-leaflet-markercluster)

> 扩展为 Angular.io 的 @ bluehalo/ngx-leaflet 包 为Angular.io项目提供传单。 与Leaflet v1.x和传单相兼容. marker cluster v1.x

## 目录

-   [安装](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/#readme-install)
-   [使用量](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/#readme-usage)
-   [API 密码](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/API.md)
-   [烹饪本](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/cookbook.md)
-   [贡献](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/#readme-contribute)
-   [许可证](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/#readme-license)

## 安装

通过 npm 安装软件包及其对等依赖性 :

```
npm install leaflet @bluehalo/ngx-leaflet
npm install leaflet.markercluster @bluehalo/ngx-leaflet-markercluster
```

如果您打算在打字计划中使用此库( 使用打字), 您还需要通过 npm 安装传单打字:

```
npm install @types/leaflet @types/leaflet.markercluster
```

## 使用量

此插件用于此 [Angular.io 叶片插件](https://github.com/bluehalo/ngx-leaflet)。 。 。 .

第一步是遵循指示. 接下来,遵循类似的进程安装和配置此插件. 这些步骤一般是:

-   安装此软件包及其依赖性(见上文).
-   导入传单. marker 集群样式表(即 , `node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css` 财务报告和审定财务报表 `.../MarkerCluster.css` )).
    -   遵循与文件记录相同的程序 `@bluehalo/ngx-leaflet`。 。 。 .
-   导入 `LeafletMarkerClusterDirective` 输入您的角应用模块和本地模块(如果适用).
-   创建和配置地图(见下文和/或演示文件)

要创建地图,请使用 `leaflet` 属性指令。 此指令必须先出. 您必须通过 `leafletOptions` 或通过约束 `leafletZoom`, (中文(简体) ), `leafletCenter`,以及 `leafletLayers`。 。 。 .

```angular181html
<div style="height: 400px;"
     leaflet
     [leafletOptions]="options"
     [leafletMarkerCluster]="markerClusterData"
     [leafletMarkerClusterOptions]="markerClusterOptions">
</div>
```

## API 密码

完整的 API 文档在 [文件/API.md](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/API.md)它涵盖:

-   `[leafletMarkerCluster]` ——指令激活和数据输入
-   `[leafletMarkerClusterOptions]` ——通过选项 `leaflet.markercluster`
-   `[leafletMarkerClusterGroup]` ——可选预创建 `MarkerClusterGroup` (用子插头)
-   `(leafletMarkerClusterReady)` - 访问该程序的产出活动 `MarkerClusterGroup` 实例

## 烹饪本

共同模式和实例 [文件/教科书.md](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/cookbook.md),包括:

-   [使用子管道( Layer 支持, 可自由使用)](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/cookbook.md#using-sub-plugins-layersupport-freezable) - 通过一个预创的 `MarkerClusterGroup` 通过 `[leafletMarkerClusterGroup]` 以使用子插件工厂
-   [缩放到 ShowLayer 调用不开火](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/cookbook.md#zoomtoshowlayer-callback-not-firing) - 使用 `NgZone.runOutsideAngular()` js 时间问题
-   [解决问题: `L.markerClusterGroup is not a function`](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/docs/cookbook.md#troubleshooting-lmarkerclustergroup-is-not-a-function) - 建造/共同JS接口问题的三个解决办法

## 贡献

公关接受。 请对功能分支投稿 并打开一个吸引请求反对 `master`。 。 。 .

## 许可证

见 [自由主义](https://npmcn.com/package/%40bluehalo/ngx-leaflet-markercluster/LICENSE) 详细情况.

## 贷项

**[传单](http://leafletjs.com/)** 是一个很棒的地图包. **[小册子.标记组](https://github.com/Leaflet/Leaflet.markercluster)** 此库包是基本的集群插件 .

## 常见问题

### @bluehalo/ngx-leaflet-markercluster 是什么？

Leaflet Marker 集群插件的 Angular\.io 组件

### 如何安装 @bluehalo/ngx-leaflet-markercluster？

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

### @bluehalo/ngx-leaflet-markercluster 支持 TypeScript 吗？

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

### @bluehalo/ngx-leaflet-markercluster 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bluehalo/ngx-leaflet-markercluster 可以商用吗？

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

### @bluehalo/ngx-leaflet-markercluster 的下载量有多少？

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

### @bluehalo/ngx-leaflet-markercluster 还在维护吗？

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