vue2-Google-Maps, beforeEnter() 루트 가드를 사용한gmapapi 접근

vue2-Google-Maps, beforeEnter() 루트 가드를 사용한gmapapi 접근

콘텍스트:place_id에서 플레이스 데이터를 가져오려고 합니다.beforeEnter()루트 가드기본적으로 누군가가 URL을 정확히 입력했을 때 데이터를 로드하고 싶다.www.example.com/place/{place_id}현재 자동완료 입력을 사용하여 루트를 입력하면 모든 것이 직접 동작하지만 새로고침 탭에서 URL에 직접 접속하면 동작하지 않습니다.그 이유는google아직 생성되지 않았습니다.

질문:접속 방법PlacesService()사용방법beforeEnter()루트 가드?

오류: Uncaught (in promise) ReferenceError: google is not defined

코드 예:내 매장 모듈 중 하나:

const module = {
  state: {
    selectedPlace: {}
  },
  actions: {
    fetchPlace ({ commit }, params) {
      return new Promise((resolve) => {
        let request = {
          placeId: params,
          fields: ['name', 'rating', 'formatted_phone_number', 'geometry', 'place_id', 'website', 'review', 'user_ratings_total', 'photo', 'vicinity', 'price_level']
        }
        let service = new google.maps.places.PlacesService(document.createElement('div'))
        service.getDetails(request, function (place, status) {
          if (status === 'OK') {
            commit('SET_SELECTION', place)
            resolve()
          }
        })
      })
    },
  },
  mutations: {
    SET_SELECTION: (state, selection) => {
      state.selectedPlace = selection
    }
  }
}

export default module

내 스토어.js:

import Vue from 'vue'
import Vuex from 'vuex'
import placeModule from './modules/place-module'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(Vuex)

// gmaps
Vue.use(VueGoogleMaps, {
  load: {
    key: process.env.VUE_APP_GMAP_KEY,
    libraries: 'geometry,drawing,places'
  }
})

export default new Vuex.Store({
  modules: {
    placeModule: placeModule
  }
})

라우터의 경우:

import store from '../state/store'

export default [
  {
    path: '/',
    name: 'Home',
    components: {
      default: () => import('@/components/Home/HomeDefault.vue')
    }
  },
  {
    path: '/place/:id',
    name: 'PlaceProfile',
    components: {
      default: () => import('@/components/PlaceProfile/PlaceProfileDefault.vue')
    },
    beforeEnter (to, from, next) {
      store.dispatch('fetchPlace', to.params.id).then(() => {
        if (store.state.placeModule.selectedPlace === undefined) {
          next({ name: 'NotFound' })
        } else {
          next()
        }
      })
    }
  }
]

내가 시도한 것: - 변경new google.maps.places.PlacesService로.new window.new google.maps.places.PlacesService- 사용방법beforeRouteEnter()보다는beforeEnter()네비게이션 가드로서 - 변경google.maps...로.gmapApi.google.maps...그리고.gmapApi.maps...- 나락으로 비명을 지르며 - 내가 내린 모든 결정에 의문을 품고

EDIT: 저도 한번 해봤습니다.this.$gmapApiPromiseLazy()Wiki에서 제안합니다.

플러그인은 다음을 제공하는 혼합 기능을 추가합니다.this.$gmapApiPromiseLazyVue 인스턴스(컴포넌트)에만 적용되지만 운이 좋으시네요...또한 동일한 방법을 에 추가합니다.Vue정적으로

소스 코드

Vue.mixin({
  created () {
    this.$gmapApiPromiseLazy = gmapApiPromiseLazy
  }
})

Vue.$gmapApiPromiseLazy = gmapApiPromiseLazy

따라서 매장이나 라우터에서 해야 할 일은

import Vue from 'vue'

// snip...

Vue.$gmapApiPromiseLazy().then(() => {
  let service = new google.maps.places....
})

언급URL : https://stackoverflow.com/questions/62012320/vue2-google-maps-accessing-gmapapi-using-beforeenter-route-guard