# @fawmi/vue-google-maps 中文文档

规范地址：https://npmcn.com/package/%40fawmi/vue-google-maps/

版本：0\.9\.79
npm 元数据更新时间：2022-08-30T15:47:46.190Z
中文译文更新时间：2026-11-14T12:03:30.327Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fawmi/vue-google-maps
原文对照：https://npmcn.com/package/%40fawmi/vue-google-maps/?lang=original
项目主页：https://vue-map.netlify.app/
源码仓库：https://github.com/fawmi/vue-google-maps

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

- 包体积（解压后）：56.4 kB，39 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2020-10-19T11:13:40.159Z
- 最新版本发布：2022-08-30T15:47:46.122Z
- 近 30 天下载量：148036（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：86（近 12 个月 0 个）

## 中文简介

Vue.js 3 的 Google 地图组件

## 安装

```sh
npm install @fawmi/vue-google-maps
```

也可以使用：`pnpm add @fawmi/vue-google-maps`、`yarn add @fawmi/vue-google-maps`、`bun add @fawmi/vue-google-maps`

## README

# Vue 3 Google 地图组件

Vue.js 的Google地图组件集.

#### 为什么这个图书馆存在?

我们在项目中大量使用Google地图,所以我想有一个维护良好的Google地图图书馆.

## 文档

离职 [vue-map.netlify.应用程序](https://vue-map.netlify.app/) 详细文件或 [示例的代码和框](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js)

## 安装

您可以使用 npm 安装它

```
npm install -S @fawmi/vue-google-maps
```

## 基本用途

你需要一个API密钥。 学会如何 [获取 Api 密钥](https://developers.google.com/maps/documentation/javascript/get-api-key) 。 。 。 .

### 配置要使用组件的 Vue

在你身边 `main.js`

```js
import { createApp } from 'vue'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

const app = createApp(App);
app.use(VueGoogleMaps, {
    load: {
        key: 'YOUR_API_KEY_COMES_HERE',
    },
}).mount('#app')

```

### 在组件中任意使用它

```vue
<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 100vw; height: 900px"
  >
  </GMapMap>
</template>

<script >
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
    }
  }
}
</script>
```

## 构成部分

### 标记

如果您需要添加标记到 `Map`,添加 `GMapMarker` 儿童 `GMapMap` 组件.

```vue
<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapMarker
        :key="marker.id"
        v-for="marker in markers"
        :position="marker.position"
    />
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          id: 'dfsldjl3r',
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
      ]
    }
  }
}
</script>
```

### 组

如果你有太多的标记,这对集群标记很有帮助. 通过将标记包成 `GMapCluster` 组件.

```vue
<template>
  <GMapMap
      :center="center"
      :zoom="7"
      map-type-id="terrain"
      style="width: 500px; height: 300px"
  >
    <GMapCluster>
      <GMapMarker
          :key="index"
          v-for="(m, index) in markers"
          :position="m.position"
          :clickable="true"
          :draggable="true"
          @click="center=m.position"
      />
    </GMapCluster>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      center: {lat: 51.093048, lng: 6.842120},
      markers: [
        {
          position: {
            lat: 51.093048, lng: 6.842120
          },
        }
        , // Along list of clusters
      ]
    }
  }
}
</script>
```

### 热图

需要将热映射层添加到地图中,在负载配置中加入可视化库,并添加GMapHeatmap作为GMapMap组件的孩子.

```js
import { createApp } from 'vue'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

const app = createApp(App);
app.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY_COMES_HERE',
    libraries: "visualization"
  },
}).mount('#app')

```

```vue
<template>
  <GMapMap
    ref="myMapRef"
    :center="center"
    :zoom="zoom"
    style="width: 100%; height: 600px"
  >
    <GMapHeatmap :data="heatData"></GMapHeatmap>
  </GMapMap>
</template>
<script>
export default {
  name: 'App',
  setup() {
    const center = {lat: 52.2985593, lng: 104.2455337}
    const zoom = 12
    const myMapRef = ref();
    const heatData = ref([])

    watch(myMapRef, googleMap => {
      if (googleMap) {
        googleMap.$mapPromise.then(map=> {
          heatData.value = [
            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},
          ];
        })
      }
    });

    return {
      center,
      zoom,
      heatData,
      myMapRef
    }
  },
}
</script>
```

更多组件的退出文件

## 访问地图对象

如果你想访问 `google map` 对象,您可以通过查看地图对象来访问它.

```vue
<template>
  <GMapMap ref="myMapRef" />
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.myMapRef)
  }
}
</script>
```

### 映射选项

您可以使用选项属性通过地图选项 :

见 [地图选项](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) 用于完整现有选项清单.

```vue
<GMapMap
 :options="{
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
   fullscreenControl: true,
   disableDefaultUi: false
 }"
>
</GMapMap>
```

## 更多组件

许多其他组件也得到了支持. 离职 [文档](https://vue-map.netlify.app/) 为了更多.

## Nuxt 3 用法

首个添加 `@fawmi/vue-google-maps` 改为 `build.transpile` 属性 `nuxt.config.ts`。 。 。 .

```ts
export default defineNuxtConfig({
 build: {
   transpile: ['@fawmi/vue-google-maps']
 },
})
```

然后创建一个插件 `~/plugin/vueGoogleMaps.ts`。 。 。 .

```ts
import { defineNuxtPlugin } from '#app'
import  VueGoogleMaps from '@fawmi/vue-google-maps'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGoogleMaps, {
    load: {
      key: 'YOUR_GOOGLE_API_KEY',
    },
  })
})
```

## 捐款

最佳的贡献方式是报告可复制的bug,但特征要求和改进建议也总是受到欢迎. 而且绝对的bug修正和PR是欢迎的.

## 常见问题

### @fawmi/vue-google-maps 是什么？

Vue\.js 3 的 Google 地图组件

### 如何安装 @fawmi/vue-google-maps？

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

### @fawmi/vue-google-maps 支持 TypeScript 吗？

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

### @fawmi/vue-google-maps 支持 ESM 还是 CommonJS？

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

### @fawmi/vue-google-maps 可以商用吗？

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

### @fawmi/vue-google-maps 的下载量有多少？

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

### @fawmi/vue-google-maps 还在维护吗？

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