Vue multiple api includes

Question

你好，我试图显示谷歌地图，我也有输入字段。但是，当我运行代码，我得到这样的：您已经包括此页

import Vue from 'vue' 
import App from './App.vue' 

import VueGmaps from 'vue-gmaps' 

import * as VueGoogleMaps from 'vue2-google-maps'; 


Vue.use(VueGoogleMaps, { 
    load: { 
     key: 'AIzaSyCetTFERhTQZDUT1C7GNvElGdsfpVZ98lQ', 
     libraries:['places'], 
     version:'3' 
     // libraries: 'places', //// If you need to use place input 
    } 
}); 

Vue.use(VueGmaps, { 
    key:'AIzaSyCetTFERhTQZDUT1C7GNvElGdsfpVZ98lQ', 
    libraries: ['places'], 
    version: '3', 

}) 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

Answer 1

由于google map api已加载twice而导致该错误，因为您已经使用了两次Vue.use()。一个可能的解决方法是将防止在第二Vue.use()声明google map api的加载通过添加选项loadGoogleApi: 'false'在vue-gmaps readme.md

import Vue from 'vue' 
import App from './App.vue' 

import VueGmaps from 'vue-gmaps' 

import * as VueGoogleMaps from 'vue2-google-maps'; 


Vue.use(VueGoogleMaps, { 
    load: { 
     key: 'AIzaSyCetTFERhTQZDUT1C7GNvElGdsfpVZ98lQ', 
     libraries:['places'], 
     version:'3' 
     // libraries: 'places', //// If you need to use place input 
    } 
}); 

Vue.use(VueGmaps, { 
    key:'AIzaSyCetTFERhTQZDUT1C7GNvElGdsfpVZ98lQ', 
    libraries: ['places'], 
    version: '3', 
    loadGoogleApi: 'false', 

}) 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

Answer 2

由于Vue.use(VueGoogleMaps)上的谷歌地图API多次在两个地方都一样，要复制该代码。尝试只调用一次 - 您不需要调用它两次，只是使用两个组件中的代码。