Vue 3 Google 地图组件

Vue.js 的Google地图组件集.

为什么这个图书馆存在?

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

文档

离职 vue-map.netlify.应用程序 详细文件或 示例的代码和框

安装

您可以使用 npm 安装它

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

基本用途

你需要一个API密钥。 学会如何 获取 Api 密钥 。 。 。 .

配置要使用组件的 Vue

在你身边 main.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')

在组件中任意使用它

<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 组件.

<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 组件.

<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组件的孩子.

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')

<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 对象,您可以通过查看地图对象来访问它.

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

映射选项

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

见 地图选项 用于完整现有选项清单.

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

更多组件

许多其他组件也得到了支持. 离职 文档 为了更多.

Nuxt 3 用法

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

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

然后创建一个插件 ~/plugin/vueGoogleMaps.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是欢迎的.