vue2-google-module 사용자 지정 스타일

vue2-google-module 사용자 지정 스타일

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

내 페이지에서 나는 구글 지도를 사용할 것이다.그건 문제없고 이 코드는 가능하지만, 지도에 커스텀 컬러를 설정할 수 있습니까?여기에 링크 설명을 입력합니다.Google Maps JavaScript를 사용하면 매우 간단하지만 vue2-Google-maps에서도 동일한 효과를 얻을 수 있는 방법은 무엇입니까?소품 같은 거?

사실 꽤 쉬울 거야확장만 하면 됩니다.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'}]
        }
    ]
  }
}

언급URL : https://stackoverflow.com/questions/49737100/vue2-google-maps-custom-styles