vue-google-maps-如何設置地圖樣式？

Question

因此，我將 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鍵和sat :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}
    }
});