谷歌地图动态设置地图对象的样式

Question

嘿我想知道以后是否可以动态更改地图对象的styles属性。 我正在寻找setStyles map的方法，但没有找到适合我的方法。 我在jsfiddler中添加代码： The code

function initMap() {
  // Styles a map in night mode.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.674, lng: -73.945},
    zoom: 12,
    styles: [
      {
        featureType: "road",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      },
       {
        featureType: "administrative.locality",
        elementType: "labels",
        stylers: [
          { visibility: "off" }
        ]
      }
    ]
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 1

使用.setOptions：

map.setOptions({styles: [{
    featureType: "administrative.locality",
    elementType: "labels",
    stylers: [
      { visibility: "on" }
    ]
}]});

updated fiddle

代码段

function initMap() {
  // Styles a map in night mode.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 12,
    styles: [{
      featureType: "road",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }, {
      featureType: "administrative.locality",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  });

  map.setOptions({
    styles: [{
      featureType: "road",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }, {
      featureType: "administrative.locality",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  });
  var toggle = true;
  google.maps.event.addDomListener(document.getElementById('btn'), "click", function() {
    if (toggle) {
      map.setOptions({
        styles: [{
          featureType: "administrative.locality",
          elementType: "labels",
          stylers: [{
            visibility: "off"
          }]
        }]
      });
    } else {
      map.setOptions({
        styles: [{
          featureType: "administrative.locality",
          elementType: "labels",
          stylers: [{
            visibility: "on"
          }]
        }]
      });
    }
    toggle = !toggle;
  });
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<input type="button" id="btn" value="toggle" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>