Vue.js vue2谷歌地图自定义样式 从“vue2谷歌地图”导入*作为VueLogleMaps； 从“Vue”导入Vue； Vue.use（VueLogleMaps{ 负载：{ 键：“AIzaSyB3Dll79BdxJTlWtovrOnP2Vx4IUlSOlGg” }, }); 导出默认值{ 数据（）{ 返回{ 中心：{lat:40.731266336572205，lng:-73.99026142354683}， 标记：[ { 位置：{lat:40.731266336572205，lng:-73.99026142354683}， }], }; }, };

在我的页面上，我将使用谷歌地图。这是没有问题的，这段代码可以工作，但是这可以在地图上设置自定义颜色吗？让我们这样说：。使用Google Maps JavaScript这非常简单，但如何使用vue2 Google Maps获得相同的效果？？一些道具什么的？

事实上这应该很容易。只需使用以下属性扩展

mapStyle

对象（从“地图”页面粘贴一个）：

---

你能展示一下

mapStyle

的样子吗？

<template>
 <gmap-map
  :center="center"
  :zoom="11"
  :options="mapStyle"
  style="height: 60vh;"
 >
  <gmap-marker
   :key="index"
   v-for="(m, index) in markers"
   :position="m.position"
   :clickable="true"
   :draggable="true"
   @click="center=m.position">
  </gmap-marker>
 </gmap-map>
</template>

import * as VueGoogleMaps from 'vue2-google-maps';
import Vue from 'vue';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyB3Dll79BdxJTlWtovrOnP2Vx4IUlSOlGg'
  },
});

export default {
  data() {
    return {
      center: {lat: 40.731266336572205 , lng: -73.99026142354683},
      markers: [
        {
          position: {lat: 40.731266336572205 , lng: -73.99026142354683},
        }],
    };
  },
};

data: {
  mapStyle: {
    // other properties... 
    styles: [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
        },
        {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
        },
        {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{color: '#263c3f'}]
        },
        {
            featureType: 'poi.park',
            elementType: 'labels.text.fill',
            stylers: [{color: '#6b9a76'}]
        },
        {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{color: '#38414e'}]
        },
        {
            featureType: 'road',
            elementType: 'geometry.stroke',
            stylers: [{color: '#212a37'}]
        },
        {
            featureType: 'road',
            elementType: 'labels.text.fill',
            stylers: [{color: '#9ca5b3'}]
        },
        {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [{color: '#746855'}]
        },
        {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{color: '#1f2835'}]
        },
        {
            featureType: 'road.highway',
            elementType: 'labels.text.fill',
            stylers: [{color: '#f3d19c'}]
        },
        {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{color: '#2f3948'}]
        },
        {
            featureType: 'transit.station',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
        },
        {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{color: '#17263c'}]
        },
        {
            featureType: 'water',
            elementType: 'labels.text.fill',
            stylers: [{color: '#515c6d'}]
        },
        {
            featureType: 'water',
            elementType: 'labels.text.stroke',
            stylers: [{color: '#17263c'}]
        }
    ]
  }
}