谷歌地圖未使用庫 vue2-google-maps 呈現

Question

我正在嘗試使用帶有 vue 的 google-maps 渲染地圖，我正在使用用於 transpiler vue js 的 webpackage，我有一個文件 main.js 這個調用所有導入。

文件 mains.js

import Vue from 'vue'

import { load } from 'vue2-google-maps'
load({
    key: 'my-api',
    v: '3.exp',
    installComponents: false
});

import App from './components/app.vue'
new Vue({
    el: '#app-vue',
    render: h => h(App)
});

文件 app.vue

<template>
        <gmap-map
                :center="{lat:10, lng:10}"
                :zoom="7"
                map-type-id="terrain"
                style="width: 500px; height: 300px"
        ></gmap-map>
</template>

<script>
import { Map } from 'vue2-google-maps'
export default {
  name: 'app',
    components: {
      'gmap-map': Map
    },
    data () {
        return {
            center: {lat: 10.0, lng: 10.0},
            markers: [{
                position: {lat: 10.0, lng: 10.0}
            }, {
                position: {lat: 11.0, lng: 11.0}
            }]
        }
    }
}
</script>

但它不起作用，頁面是空的，我做錯了什么？

"vue": "^2.5.2",

"vue2-google-maps": "^0.8.4"

Answer 1

我解決了改變我的依賴關系的問題

"vue": "2.2.1",
"vue-loader": "11.1.3",
"vue-template-compiler": "2.2.1",
"vue2-google-maps": "0.8.4".

Answer 2

我正在使用自動完成組件，並且在他們的 doc(vue2-google-maps) 組件上有一個屬性 bounds，你知道 bounds 的數據結構嗎？ 你怎么能越界？