Saya menggunakan Nuxt dan vue2-google-maps tetapi saya memiliki kesalahan berikut

kesalahan modul: google tidak ditentukan

Saya membaca resmi FAQ GitHub, jadi saya menggunakan this.$gmapApiPromiseLazy().then(). Tapi, saya memiliki kesalahan yang disebutkan di atas.
Metode getCurrentPositionandBathroom adalah untuk mendapatkan posisi saat ini dan mencari toko serba ada di sekitar posisi saat ini.

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

Apa yang harus saya lakukan?

PS: Saya bisa melihat Google Maps. Dengan kata lain, Google Maps ditampilkan.

-2
A.Hayashi 11 Mei 2021, 22:11

1 menjawab

Jawaban Terbaik

Baiklah, jadi ada beberapa konfigurasi yang harus dilakukan tetapi saya berhasil memiliki peta kerja. Metode this.getBathroom() Anda tidak berfungsi untuk saya, tetapi ini terkait dengan API atau cara Anda menangani logika, saya kira.

Saya pada dasarnya mengikuti paket README dan semuanya berjalan lancar pada akhirnya. Tidak ada yang istimewa dan google tersedia seperti yang dijelaskan di bagian berikut:

Jika Anda perlu mendapatkan akses ke objek google

Berikut adalah kode terakhir dari file .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>

Anda dapat menemukan komit yang berguna di repo github saya di sini.

Begini tampilannya di akhir, sejauh ini tidak ada kesalahan.

enter image description here

PS: Saya tidak melihat Anda menggunakan Vuetify, jadi saya tidak repot-repot membawanya kembali nanti.

0
kissu 12 Mei 2021, 01:43