Question

我试过一段时间，我似乎无法找到答案。我将Google Maps API v3实施到了我的网站，该网站正常运行。然而，当我尝试将其风格化（简单地去饱和）时，它似乎不起作用。我尝试了一堆不同的教程，但没有用。我也在使用Twitter Bootstrap，为了节省我一点CSS工作，如果这会影响到什么？可以看到该网站here。

这是地图的脚本：

<script type="text/javascript">
  function initialize() {
    var styles = [
      {
        featureType: "all", elementType: "all", stylers: [ { saturation: -100 }
        ]
      }
    ];

    var mapOptions = {
      center: new google.maps.LatLng(42.29900, -71.26232),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

  };
</script>

这就是我将它放在页面下方的HTML中的方式：

<div class="bg-blue">
  <div id="map_canvas" style="width: 100%; height: 250px;"></div>
</div>

就像我上面说的那样，地图会显示出来，但样式并没有生效。如果您有任何帮助，请告诉我。我真的很感激！

Answer 1

您创建了自己的样式，但尚未将它们应用到地图中......

https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

function initialize() {

    var styles = [
      {
        featureType: "all", elementType: "all", stylers: [ { saturation: -100 }
        ]
      }
    ];

    var mapOptions = {
      center: new google.maps.LatLng(42.29900, -71.26232),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles  // <-- add this
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

};

Answer 2

您需要在styles对象中设置mapOptions属性：

var mapOptions = {
  center: new google.maps.LatLng(42.29900, -71.26232),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles
};

http://jsfiddle.net/bTZcS/

谷歌地图API v3没有风格化

2 个答案: