如何在 vue-google-maps 中设置 infoWindow - Vue.js

Question

我对 vue.js 很陌生。我正在使用 vue-google-maps 来显示地图，我想向其中添加一个打开的信息窗口。我尝试将 infoWindow 组件添加到 infowindow 标签，但没有成功。

模板

<gmap-map style="width: 70%; height: 100%; position: absolute; left:0; top:0"
            v-bind:center="center"
            v-bind:zoom="zoom"
            v-bind:options="options"
>
    <infoWindow :position="{
            lat: 57.708,
            lng: 11.974
        }" :opened="true" :content="Hello World">
    </infoWindow>
</gmap-map>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<script src="https://rawgit.com/GuillaumeLeclerc/vue-google-maps/master/dist/vue-google-maps.js"></script>

脚本

VueGoogleMap.load({
    'key': 'API_KEY'
});

Vue.component('gmap-map', VueGoogleMap.Map);
Vue.component('infoWindow', VueGoogleMap.infoWindow);

new Vue({
    el: 'body',
    data: {
        center: {lat: 57.708, lng:  11.975},
        zoom: 14,
        options: {styles: mapStyle},
        infoWindow: [{
            closeBoxURL: "",
            maxWidth: 200
        }]
    }
});

有人可以指导我吗？

Answer 1

事实证明，我只需将 VueGoogleMaps-key "infowindow" 设置为首字母大写（如下所示：Vue.component('infoWindow', VueGoogleMap.InfoWindow);）。

荒谬的错误，但 GuillaumeLeclerc 的 vue-google-maps 值得更好的文档！

如何在 vue-google-maps 中设置 infoWindow - Vue.js

How to set infoWindow in vue-google-maps - Vue.js

javascript

google-maps

vue.js

vue-component