vue2-google-maps 自定义样式答案

【问题标题】：vue2-google-maps custom stylesvue2-google-maps 自定义样式
【发布时间】：2018-04-09 16:02:00
【问题描述】：

<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},
        }],
    };
  },
};

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

【问题讨论】：

你能展示一下mapStyle 的样子吗？

标签： vue.js vuejs2 vue-component

【解决方案1】：

实际上应该很简单。只需使用以下属性扩展您的mapStyle 对象（从地图页面粘贴一个）：

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'}]
        }
    ]
  }
}

【讨论】：