Laravel + Vue JS和Vue2-Google-Maps

Question

所以我在這個庫上遇到了麻煩，我認為我正確地設置了所有東西，但是我的組件沒有渲染，我只得到了一個空白頁面，控制台中沒有錯誤。 這是我的代碼：

地圖組件

  <template>
      <div >
        <gmap-map :center="{lat:1.38, lng:103.8}" :zoom="12">
          <gmap-marker :position="{lat:1.38, lng:103.8}">
          </gmap-marker>
          <gmap-info-window :position="{lat:1.38, lng:103.8}">
            Hello world!
          </gmap-info-window>
        </gmap-map>
      </div>
    </template></strike>



    <script>
      export default {

      }
    </script>

    <style>
      .map-container, .vue-map-container {
        display: flex;
        width: 100%;
      }
    </style>'

Main.js

require('./bootstrap');
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import routes from './routes';

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

Vue.use(VueGoogleMaps, {
  load: {
    key: 'My_api_key',
    v: '3.31',
    libraries: 'places'
  }
})


Vue.use(VueRouter);
const router = new VueRouter({
    routes
});


window.Vue = require('vue');


Vue.component('navbar-component', require('./components/LayoutComponents/NavbarComponent.vue'));
Vue.component('home-component', require('./components/HomeComponent.vue'));
Vue.component('map-component', require('./components/MapComponent.vue'));
Vue.component('footer-component', require('./components/LayoutComponents/FooterComponent.vue'));
Vue.component('register-component', require('./components/AuthComponents/RegisterComponent.vue'));
Vue.component('login-component', require('./components/AuthComponents/LoginComponent.vue'));



const app = new Vue({
    el: '#app',
    router
});

路由器可以正確處理一切，但由於某些原因，當我有與地圖有關的代碼時，它不會加載地圖組件，如果我在那里放一些文字，它將正確加載所有組件。 我使用npm安裝了vue2-google-maps，它正確顯示在package.json文件中。 總的來說我對Vue很陌生，所以我盡力做到了。

Answer 1

你需要一個

名稱：“ gmap”

在您的導出中，然后在地圖上放置width和height屬性。