所以我将vue-google-maps与Vue.js一起使用,并在身体上放置了一张地图。我想在地图上添加一些样式,但不知道如何去做。使用Vanilla.js时,我只能使用theMap.setOptions({styles: style_array})
添加样式,但如何使用vue-google-maps进行添加?
这是我的设置:
DOM
<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
:center="{ lat: 30.2672, lng: -97.7431 }"
:zoom="12"
>
</google-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://cdnjs.cloudflare.com/ajax/libs/vue-google-maps/0.1.17/vue-google-maps.js"></script>
<script type="text/javascript" src="/js/[JS-FILE]"></script>
JS
VueGoogleMap.load({
'key': '***'
});
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
data: {
mapStyle: mapStyle
}
});
我曾尝试为api-key&amp;添加样式坐在:styles: "style_array"
到DOM,但没有任何效果。有谁知道如何使用Vue.js设置地图样式?
答案 0 :(得分:8)
在彻底阅读了vue-google-maps文档后,我意识到在启动google-map元素时可以选择设置":options: [style]"
。
我在 JS 中设置了样式并将其传递给客户端,如下所示:
<强> DOM 强>
<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
:center="{ lat: 30.2672, lng: -97.7431 }"
:zoom="12"
v-bind:options="mapStyle"
>
</google-map>
<强> JS 强>
var mapStyle = [style];
VueGoogleMap.load({
'key': '***'
});
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
data: {
mapStyle: {styles: mapStyle}
}
});