无法通过VueJS / NuxtJS使用Google Maps API

时间:2019-11-18 15:54:14

标签: google-maps vue.js vuejs2 nuxt

我徒劳地在互联网上搜索了将Google Maps API与VueJS / NUxtJS结合使用的方法。 我看过许多教程,展示了如何使用this package甚至vue2-google-maps来完成它。

但是,尽管按照本教程中的说明执行了每个步骤,但是我仍然收到类似以下错误:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <gmap-map> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/googleMaps.vue> at pages/google-maps.vue
       <Nuxt>
         <Default> at layouts/default.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5932
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
merged @ vue.runtime.esm.js?2b0e:3301
hydrate @ vue.runtime.esm.js?2b0e:6372
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
mount @ client.js?06a0:689
mountApp$ @ client.js?06a0:727
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:296
prototype.<computed> @ runtime.js?96cf:114
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:152
eval @ runtime.js?96cf:162
Promise.then (async)
invoke @ runtime.js?96cf:161
eval @ runtime.js?96cf:162
Promise.then (async)
invoke @ runtime.js?96cf:161
eval @ runtime.js?96cf:195
callInvokeWithMethodAndArg @ runtime.js?96cf:194
enqueue @ runtime.js?96cf:217
prototype.<computed> @ runtime.js?96cf:114
runtime.async @ runtime.js?96cf:241
mountApp @ client.js?06a0:674
Promise.then (async)
eval @ client.js?06a0:88
eval @ client.js:1117
./.nuxt/client.js @ app.js:35
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
0 @ app.js:425
__webpack_require__ @ runtime.js:791
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 38 more frames
2vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <gmap-marker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/googleMaps.vue> at pages/google-maps.vue
       <Nuxt>
         <Default> at layouts/default.vue
           <Root>
warn @ vue.runtime.esm.js?2b0e:619
createElm @ vue.runtime.esm.js?2b0e:5932
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
merged @ vue.runtime.esm.js?2b0e:3301
hydrate @ vue.runtime.esm.js?2b0e:6372
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
hydrate @ vue.runtime.esm.js?2b0e:6372
hydrate @ vue.runtime.esm.js?2b0e:6405
patch @ vue.runtime.esm.js?2b0e:6487
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4054
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
mount @ client.js?06a0:689
mountApp$ @ client.js?06a0:727
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:296
prototype.<computed> @ runtime.js?96cf:114
tryCatch @ runtime.js?96cf:62
invoke @ runtime.js?96cf:152
eval @ runtime.js?96cf:162
Promise.then (async)
invoke @ runtime.js?96cf:161
eval @ runtime.js?96cf:162
Promise.then (async)
invoke @ runtime.js?96cf:161
eval @ runtime.js?96cf:195
callInvokeWithMethodAndArg @ runtime.js?96cf:194
enqueue @ runtime.js?96cf:217
prototype.<computed> @ runtime.js?96cf:114
runtime.async @ runtime.js?96cf:241
mountApp @ client.js?06a0:674
Promise.then (async)
eval @ client.js?06a0:88
eval @ client.js:1117
./.nuxt/client.js @ app.js:35
__webpack_require__ @ runtime.js:791
fn @ runtime.js:151
0 @ app.js:425
__webpack_require__ @ runtime.js:791
checkDeferredModules @ runtime.js:46
webpackJsonpCallback @ runtime.js:33
(anonymous) @ app.js:1
Show 40 more frames
client.js?e0ba:95 [HMR] connected 

我曾经使用vue2-google-maps来显示地图,但是我无法操纵该地图以及未定义的对象mapgoogle

一些帮助将不胜感激。 谢谢。

0 个答案:

没有答案