vue-google-maps - 如何设置地图样式？

Question

所以我使用VUE,谷歌,地图与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中添加样式并坐到:styles: "style_array"DOM,但没有任何效果.有谁知道如何使用Vue.js设置地图样式？

Answer 1

在彻底阅读了vue-google-maps文档之后,我意识到":options: [style]"在启动google-map元素时可以选择设置.

我在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}
    }
});