# @adamscybot/react-leaflet-component-marker 中文文档

规范地址：https://npmcn.com/package/%40adamscybot/react-leaflet-component-marker/

版本：2\.0\.3
npm 元数据更新时间：2025-03-10T01:06:45.821Z
中文译文更新时间：2026-11-05T21:57:51.518Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：22.7 kB，11 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：@react-leaflet/core \>=2\.0\.0，leaflet \>=1\.9\.0，react \>=18\.0\.0，react-dom \>=18\.0\.0，react-leaflet \>=4\.0\.0
- 首次发布：2024-02-03T19:34:30.738Z
- 最新版本发布：2025-03-10T01:06:45.620Z
- 近 30 天下载量：14630（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

一个用于反应-叶片组件的微小包装器,允许您使用反应组件作为标记,具有工作状态,处理器,并访问父语境.

## 安装

```sh
npm install @adamscybot/react-leaflet-component-marker
```

也可以使用：`pnpm add @adamscybot/react-leaflet-component-marker`、`yarn add @adamscybot/react-leaflet-component-marker`、`bun add @adamscybot/react-leaflet-component-marker`

## README

# 反应-叶片-组件-标记器

👉 [**德莫尔**](https://stackblitz.com/edit/react-leaflet-component-marker)

QQ 使用反应组件为 [反射叶片](https://react-leaflet.js.org/) 标记.  
熟悉的互换 API 感觉像 React Leaflet.  
QQ 可以使用状态,上下文等. 具足分相. 没有BS.  
\- 输入的很强.

# 这是什么

一个小小的包装 [反应-叶片](https://react-leaflet.js.org/)是因为 `<Marker />` 组件允许您使用 React 组件作为标记,其中 **工作状态、处理者和获取父环境**。 。 。 .

本图书馆采用的方法不同于其他使用方法 `renderToString` 在它使用 React 的 [门户](https://react.dev/reference/react-dom/createPortal) 实现效果的功能。 这意味着组件不是静态的,而是一个完整的一等组件,可以有自己的状态,事件处理器和生命周期.

我努力寻找一些能起作用的东西, 使我能够从一个设计系统中掉入一些东西, 并且能够提供所有可以起作用的背景, 以及所有可以起作用的互动.

许多现有的软件包存在,但它们使用的技术意味着它们非常有限.

# 安装

使用您的工程包管理器安装 .

**国家预防机制**

```bash
npm install --save @adamscybot/react-leaflet-component-marker
```

**雅伦**

```bash
yarn install --save @adamscybot/react-leaflet-component-marker
```

**菲律宾**

```bash
pnpm add @adamscybot/react-leaflet-component-marker
```

# 文档

## 简单使用

而不是导入 `Marker` 从 `react-leaflet`导入 `Marker` 从 `@adamscybot/react-leaflet-component-marker`。 。 。 .

这个 `icon` 道具的延伸允许您选择JSX元素. 所有其他道具都与 `react-leaflet` [标记](https://react-leaflet.js.org/docs/api-components/#marker) API,但有一个额外的道具叫 `componentIconOpts` 页:1 [高级使用](https://npmcn.com/package/%40adamscybot/react-leaflet-component-marker/#readme-advanced-usage)。 。 。 .

这个 `icon` prop还可以接受所有原始类型的图标,作为基础 `react-leaflet` 马克接受。 虽然使用这个图书馆对这个案子没有好处,但如果你想用这个图书馆来代替马克这个通用的,可能会有所帮助.

### 示例

```javascript
import React from 'react'
import { MapContainer, TileLayer } from 'react-leaflet'
import { Marker } from '@adamscybot/react-leaflet-component-marker'
import 'leaflet/dist/leaflet.css'

const MarkerIconExample = () => {
  return (
    <>
      <button onClick={() => console.log('button 1 clicked')}>Button 1</button>
      <button onClick={() => console.log('button 2 clicked')}>Button 2</button>
    </>
  )
}

const CENTER = [51.505, -0.091]
const ZOOM = 13
const App = () => {
  return (
    <MapContainer center={CENTER} zoom={ZOOM}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
      <Marker position={CENTER} icon={<MarkerIconExample />} />
    </MapContainer>
  )
}
```

## 高级使用

这个 `componentIconOpts` 道克可以被传递,这是一个具有更多选项的对象,用于更高级的使用案例. 注意,如果您未将组件传递给 `icon`,这些设置将被忽略.

以下列出此对象可以提供的属性.

#### `layoutMode`

这个 `layoutMode` 控制 React 组件标记的边框的表现。 它接受两种选择:

-   `fit-content` _(默认)_。在此模式下,React组件本身定义了标记的尺寸。 组件可以随意收缩并扩展. 从内部逻辑到这个库将坐标上的组件中心起来,以匹配Leaflets默认定位;然而,Leaflet本身实际上已经无法控制这一点了.
-   `fit-parent`。在此模式下,React 组件标记的尺寸由 `iconSize` 转至 `componentIconOpts.rootDivOpts`因此,Leaflet控制了维度和定位。 组件标记应当使用100%宽度和高度的元素来填补可用的大小.

#### `rootDivOpts`

> \[注\] 一些选项不支持,因为它们在反应组件标记的情况下没有应用或没有意义. 不支持的选项是 `html`, (中文(简体) ), `bgPos`, (中文(简体) ), `shadowUrl`, (中文(简体) ), `shadowSize`, (中文(简体) ), `shadowAnchor`, (中文(简体) ), `shadowRetinaUrl`, (中文(简体) ), `iconUrl` 财务报告和审定财务报表 `iconRetinaUrl`。 。 。 .

包含来自支持的下方叶片子集属性的对象 [`divIcon`](https://leafletjs.com/reference.html#divicon) 选项,此库用作包含的包装.

如果使用 `fit-parent`,您必须设置 `iconSize` 在这里.

#### `disableScrollPropagation`

`false` 默认.

如果设置为 `true`,将无法“通过”组件标记.

#### `disableClickPropagation`

`false` 默认.

如果设置为 `true`,单击组件标记将不会被下图所捕获.

#### `unusedOptsWarning`

`true` 默认.

可以设定为 `false` 以防在控制台警告 `componentIconOpts` 已经设定,但 `icon` 不是反应组件.

#### `unusedOptsWarning`

`true` 默认.

可以设定为 `false` 以免在控制台警告 `layoutMode` 曾经 `fit-parent` 但他们没有 `iconSize` 定义 `rootDivOpts`。 。 。 .

## 常见问题

### @adamscybot/react-leaflet-component-marker 是什么？

一个用于反应-叶片组件的微小包装器,允许您使用反应组件作为标记,具有工作状态,处理器,并访问父语境\.

### 如何安装 @adamscybot/react-leaflet-component-marker？

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

### @adamscybot/react-leaflet-component-marker 支持 TypeScript 吗？

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

### @adamscybot/react-leaflet-component-marker 支持 ESM 还是 CommonJS？

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

### @adamscybot/react-leaflet-component-marker 可以商用吗？

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

### @adamscybot/react-leaflet-component-marker 的下载量有多少？

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

### @adamscybot/react-leaflet-component-marker 还在维护吗？

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