Vue多api包括

你好，我正试图显示谷歌地图，我也有输入字段。但是当我运行代码时，我得到了这样一个信息：您已经在这个页面上多次包含了Google Maps API

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

---

由于

Vue.use（vuegologlemaps）

在这两个地方都是相同的，因此您需要复制该代码。尝试只调用一次-您不需要调用两次就可以在两个组件中使用代码。

出现此错误是因为

google map api

加载了

两次，而不是因为您使用了
Vue.use（）
两次。一个可能的解决方案是防止在第二个
Vue中加载
google map api
。use（）
语句中添加选项
loadGoogleApi:“false”
，如中所述

为什么要调用
Vue。但要使用
两次？这似乎是重复和不必要的。它不是同一个包。这是来自不同提供商的两个不同包。它们之间唯一的相似之处是它们都使用
googlemapapi
。
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)
})