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多次在兩個地方都一樣，要複製該代碼。嘗試只調用一次 - 您不需要調用它兩次，只是使用兩個組件中的代碼。