使用 vue2-google-maps 时未定义 google

Question

我正在使用 Nuxt 和 vue2-google-maps 但我确实有以下错误

module error: google is not defined

我看了official GitHub FAQ，所以我用了this.$gmapApiPromiseLazy().then()。但是，我确实有上述错误。
getCurrentPositionandBathroom方法是获取当前位置，搜索当前位置附近的便利店。

<template>
  <v-app>
    <v-btn class="blue white--text" @click="getCurrentPositionandBathroom"> search for bathroom! </v-btn>
    <GmapMap
      ref="mapRef"
      :center="maplocation"
      :zoom="15"
      map-type-id="roadmap"
      style="height: 300px; width: 900px"
    >
      <GmapMarker
        v-for="m in markers"
        :key="m.id"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        :icon="m.icon"
        @click="center = m.position"
      />
    </GmapMap>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      maplocation: { lat: 35.6814366, lng: 139.767157 },
      markers: [],
    }
  },
  methods: {
    getCurrentPositionandBathroom() {
      if (process.client) {
        if (!navigator.geolocation) {
          alert('Japanese sentences')
          return
        }
        navigator.geolocation.getCurrentPosition(this.success, this.error)
      }
    },
    success(position) {
      this.maplocation.lat = position.coords.latitude
      this.maplocation.lng = position.coords.longitude
      this.$gmapApiPromiseLazy().then(() => {
        google.maps.event.addListenerOnce(
          this.$refs.mapRef.$mapObject,
          'idle',
          function () {
            this.getBathroom()
          }.bind(this),
        )
      })
    },
    getBathroom() {
      const map = this.$refs.mapRef.$mapObject
      const placeService = new google.maps.places.PlacesService(map)
      placeService.nearbySearch(
        {
          location: new google.maps.LatLng(this.maplocation.lat, this.maplocation.lng),
          radius: 500,
          type: ['convenience_store'],
        },
        function (results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            results.forEach((place) => {
              const icon = {
                url: place.icon,
                scaledSize: new google.maps.Size(30, 30),
              }
              const marker = {
                position: place.geometry.location,
                icon,
                title: place.name,
                id: place.place_id,
              }
              this.markers.push(marker)
            })
          }
        }.bind(this),
      )
    },
    error(errorMessage) {
      switch (errorMessage.code) {
        case 1:
          alert('Japanese sentences')
          break
        case 2:
          alert('Japanese sentences')
          break
        case 3:
          alert('Japanese sentences')
          break
        default:
          alert('Japanese sentences')
          break
      }
    },
  },
}
</script>

我该怎么办？

PS：我可以看到 Google 地图。换句话说，显示 Google 个地图。

Answer 1

好的，所以有很多配置要做，但我得到了一张工作地图。你的 this.getBathroom() 方法对我不起作用，但这与 API 或你如何处理我猜的逻辑有关。

我基本上是按照包的README来的，最后一切顺利。没有什么特别的，google 可用，如以下部分所述：

If you need to gain access to the google object

这里是.vue文件的最终代码

<template>
  <div>
    <button class="blue white--text" @click="getCurrentPositionandBathroom">
      search for bathroom!
    </button>
    <GmapMap
      ref="mapRef"
      :center="maplocation"
      :zoom="15"
      map-type-id="roadmap"
      style="height: 300px; width: 900px"
    >
      <GmapMarker
        v-for="m in markers"
        :key="m.id"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        :icon="m.icon"
        @click="center = m.position"
      />
    </GmapMap>
  </div>
</template>

<script>
import { gmapApi } from 'vue2-google-maps'

export default {
  data() {
    return {
      maplocation: { lat: 35.6814366, lng: 139.767157 },
      markers: [],
    }
  },
  computed: {
    google: gmapApi,
  },
  methods: {
    getCurrentPositionandBathroom() {
      if (process.client) {
        if (!navigator.geolocation) {
          alert('Japanese sentences')
          return
        }
        navigator.geolocation.getCurrentPosition(this.success, this.error)
      }
    },
    success(position) {
      this.maplocation.lat = position.coords.latitude
      this.maplocation.lng = position.coords.longitude
      // this.$gmapApiPromiseLazy().then(() => { // not needed here anymore
      this.google.maps.event.addListenerOnce(
        this.$refs.mapRef.$mapObject,
        'idle',
        function () {
          this.getBathroom()
        }.bind(this)
      )
      // })
    },
    getBathroom() {
      const map = this.$refs.mapRef.$mapObject
      const placeService = new this.google.maps.places.PlacesService(map)
      placeService.nearbySearch(
        {
          location: new this.google.maps.LatLng(
            this.maplocation.lat,
            this.maplocation.lng
          ),
          radius: 500,
          type: ['convenience_store'],
        },
        function (results, status) {
          if (status === this.google.maps.places.PlacesServiceStatus.OK) {
            results.forEach((place) => {
              const icon = {
                url: place.icon,
                scaledSize: new this.google.maps.Size(30, 30),
              }
              const marker = {
                position: place.geometry.location,
                icon,
                title: place.name,
                id: place.place_id,
              }
              this.markers.push(marker)
            })
          }
        }.bind(this)
      )
    },
    error(errorMessage) {
      switch (errorMessage.code) {
        case 1:
          alert('Japanese sentences')
          break
        case 2:
          alert('Japanese sentences')
          break
        case 3:
          alert('Japanese sentences')
          break
        default:
          alert('Japanese sentences')
          break
      }
    },
  },
}
</script>

您可以在我的 github 回购 here.

中找到有用的提交

这是最后的样子，到目前为止没有错误。

PS: 没看到你用的是Vuetify，后来就懒得带回来了

使用 vue2-google-maps 时未定义 google

google is not defined when using vue2-google-maps

google-maps

nuxt.js

vuetify.js

vue2-google-maps