# @flowingcode/google-map 中文文档

规范地址：https://npmcn.com/package/%40flowingcode/google-map/

版本：3\.10\.1
npm 元数据更新时间：2026-10-14T20:27:12.985Z
中文译文更新时间：2026-11-15T08:58:12.606Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40flowingcode/google-map
原文对照：https://npmcn.com/package/%40flowingcode/google-map/?lang=original
项目主页：https://elements.polymer-project.org/elements/google-map
源码仓库：https://github.com/FlowingCode/google-map

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

- 包体积（解压后）：145 kB，28 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- 首次发布：2020-05-19T19:09:31.037Z
- 最新版本发布：2026-10-14T20:27:12.822Z
- 近 30 天下载量：2050（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 2 个）

## 中文简介

谷歌地图网络组件

## 安装

```sh
npm install @flowingcode/google-map
```

也可以使用：`pnpm add @flowingcode/google-map`、`yarn add @flowingcode/google-map`、`bun add @flowingcode/google-map`

## README

[![Published on npm](https://img.shields.io/npm/v/@flowingcode/google-map.svg)](https://www.npmjs.com/package/@flowingcode/google-map)

# 谷歌地图

与谷歌地图嵌入和互动的Web组件.

## 特征

-   显示交互式 Google 映射( E)`google-map`(中文(简体) )
-   添加可拖放和自定义标记( E)`google-map-marker`(中文(简体) )
-   根据 Google 的高级标记添加标记(`google-map-advanced-marker`(中文(简体) )
-   在地图上绘制多边形、多线和矩形(`google-map-poly`(中文(简体) )
-   界定用于多元素的地理点(`google-map-point`(中文(简体) )
-   支持标记集群
-   触摸并握住手势模拟右键点击移动

## 下载发布

[Npm 时可用](https://www.npmjs.com/package/@flowingcode/google-map)

### npm 安装

```
npm install @flowingcode/google-map
```

然后导入所需的组件, 如 :

```js
import '@flowingcode/google-map/google-map.js';
import '@flowingcode/google-map/google-map-marker.js';
import '@flowingcode/google-map/google-map-advanced-marker.js';
```

## 使用量

```html
<google-map api-key="YOUR_API_KEY" fit-to-markers>
  <google-map-marker latitude="37.78" longitude="-122.4" draggable="true"></google-map-marker>
</google-map>
```

## 构建和运行演示

-   git 克隆仓库
-   npm 安装
-   npm 开始

演示会自动打开 `http://localhost:8000/demo/`。一个有效的 [Google 地图 API 密钥](https://developers.google.com/maps/documentation/javascript/get-api-key) 需要 – 作为查询参数通过 :

```
http://localhost:8000/demo/?api-key=YOUR_API_KEY
```

聚类:

```
http://localhost:8000/demo/polys.html?api-key=YOUR_API_KEY
```

对于高级标记:

```
http://localhost:8000/demo/advanced-markers.html?api-key=YOUR_API_KEY
http://localhost:8000/demo/advanced-markers-clustering.html?api-key=YOUR_API_KEY
```

对于标记集群( 可选) `map-id` 财务报告和审定财务报表 `custom-renderer=1` 查询参数 :

```
http://localhost:8000/demo/markers-clustering.html?api-key=YOUR_API_KEY
```

## 发布注释

见 [这里](https://github.com/FlowingCode/google-map/releases)

## 问题跟踪

这个加注的出错在它的github.com页面上跟踪. 感谢所有错误报告和特性请求 .

## 捐款

欢迎捐款。 有两种主要方法可以帮助:通过报告问题或通过拉取请求提交代码修改. 为确保每个人有一个平稳而有效的进程,请遵循下文关于你所作贡献类型的准则.

#### 1\. 报告错误和请求特征

制造一个问题是一个非常宝贵的贡献。 如果你发现了一个错误或者有新功能的想法,这就是开始的地方.

-   在创建问题之前, 请检查当前问题是否已经在讨论您的主题 .
-   如果没有,就建立一个新问题。 尽量缩小范围 但尽量详细.

> **关于臭虫报告的说明**
> 
> 尽管所有细节都很重要,a **[最小、可复制的例子](https://stackoverflow.com/help/minimal-reproducible-example)** 这是你报告中最重要的内容。 因为它消除了歧义 并让我们的团队能够亲眼观察问题 正如你所经历的那样.

#### 2\. 通过拉出请求提供代码

作为第一步,请提及我们 [发展公约](https://github.com/FlowingCode/DevelopmentConventions) 页面查找关于常规提交和代码样式要求的信息.

然后,遵循这些步骤,作出以下贡献:

-   叉开这个项目.
-   如果还没有关于贡献( 错误或特性) 的问题, 请为该项目创建一个问题 。 尽量把范围减到最小.
-   仔细地开发和测试固定或功能. 只包括解决问题所需的最低数量代码.
-   对于承诺消息, 使用 [常规武器委员会](https://github.com/FlowingCode/DevelopmentConventions/blob/main/conventional-commits.md) 描述你的变化.
-   发送原始工程的拉动请求 .
-   评论您已经执行的最初问题.

# 开发者指南

## 开始

```html
<google-map api-key="YOUR_API_KEY" latitude="37.78" longitude="-122.4" zoom="12">
  <google-map-marker latitude="37.78" longitude="-122.4" title="My location"></google-map-marker>
</google-map>
```

你需要一个有效的 [Google 地图 API 密钥](https://developers.google.com/maps/documentation/javascript/get-api-key) 用于使用这些组件.

## 高级标记

`google.maps.Marker`,用于 `google-map-marker`,为 [已贬值](https://developers.google.com/maps/deprecations) 赞成: `AdvancedMarkerElement`启用 `google-map-advanced-marker` 要使用高级标记。 两种元素都可以用在同一地图上.

高级标记需要 [地图标识](https://developers.google.com/maps/documentation/get-map-id) (单位:千美元)`DEMO_MAP_ID` 可用于测试)。 注意,当设定地图标识时 `styles` 财产 `google-map` 不应用 : 地图的样式取自 Google Cloud 控制台 .

```html
<google-map api-key="YOUR_API_KEY" map-id="YOUR_MAP_ID" fit-to-markers>
  <google-map-advanced-marker slot="markers" latitude="37.78" longitude="-122.4" title="My location"
      pin-background="#FBBC04" draggable="true"></google-map-advanced-marker>
</google-map>
```

## 常见问题

### @flowingcode/google-map 是什么？

谷歌地图网络组件

### 如何安装 @flowingcode/google-map？

在项目目录运行 npm install @flowingcode/google-map，或使用 pnpm add / yarn add / bun add。

### @flowingcode/google-map 支持 TypeScript 吗？

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

### @flowingcode/google-map 支持 ESM 还是 CommonJS？

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

### @flowingcode/google-map 可以商用吗？

@flowingcode/google-map 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @flowingcode/google-map 的下载量有多少？

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

### @flowingcode/google-map 还在维护吗？

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