2017-04-23 178 views
0

我對vue.js很陌生。我使用vue-google-maps來顯示地圖,並且我想向它添加一個打開的infowindow。我嘗試添加一個infoWindow組件到infowindow標籤,但沒有成功。如何在vue-google-maps中設置infoWindow - Vue.js

模板

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

是否有人可以指導我?

+0

對vue-google-maps詢問的每一個問題都有所降低,請停止或提供解釋 – Jesper

回答

0

事實證明,我只是用大寫的第一個字母(如:Vue.component('infoWindow', VueGoogleMap.InfoWindow);)設置VueGoogleMaps鍵「infowindow」。

可笑的錯誤,但由GuillaumeLeclerc vue谷歌地圖值得更好的文檔!