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

Question

所以我正在使用 vue-google-maps with Vue.js, and have placed a map on the body. I want to add some styling to the map, but don't know how to go about it. When using Vanilla.js, I could just add styles with theMap.setOptions({styles: style_array}), but how do I do that with 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 键并将 :styles: "style_array" 设置到 DOM，但没有任何效果。有谁知道如何使用 Vue.js 设置地图样式？

Answer 1

在彻底阅读 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}
    }
});

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

vue-google-maps - How do I set Map Styles?

javascript

google-maps

vue.js

vue-component