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

问题描述

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

模块错误：未定义谷歌

我阅读了 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 地图。

解决方法

好的，所以有很多配置要做，但我实现了有一个工作地图。您的 this.getBathroom() 方法对我不起作用，但这与 API 或我猜您处理逻辑的方式有关。

我基本上遵循了包自述文件，最后一切都很顺利。没有什么特别的，google 可用，如以下部分所述：

如果您需要访问 google 对象

这是.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，所以我没有费心把它带回来。