在 Vue.js 项目中风格化谷歌地图

Question

我有一个简单的vue项目，上面有谷歌地图。

谷歌地图我包括使用vue2-google-maps

我正在尝试制作一张风格化的地图，就像这张灰色阴影的地图一样。

所以在options我使用styles：

export default {
name: "GoogleMap",
data() {
return {
options: {
center: {
lat: 47.376332,
lng: 8.547511
},
zoom: 15,
styles: [
{
featureType: "all",
elementType: "labels.text.fill",
styles: [
{
saturation: 36
},
{
color: "#000000"
},
{
lightness: 40
}
]
},
{
featureType: "all",
elementType: "labels.text.stroke",
stylers: [
{
visibility: "on"
},
{
color: "#000000"
},
{
lightness: 16
}
]
},....
]
}, ...

但是有些不对劲。我在stack和github上的其他问题中看到了连接样式的可能性。

问题：如何在 vue.js 项目中风格化谷歌地图？

Answer 1

您需要指定gmap-map组件options的道具名称：

<gmap-map id="map" v-bind:options="options" style="width: 100%; height: 500px">
...
</gmap-map>