0

我已经尝试搜索了一段时间，但我似乎无法找到答案。我在我的网站中实现了 Google Maps API v3，它可以工作。但是，当我尝试对其进行风格化（只是去饱和）时，它似乎不起作用。我尝试了很多不同的教程，但无济于事。我也在使用 Twitter Bootstrap，为我节省一点 CSS 工作，如果这会影响什么？该网站可以在这里看到。

这是地图的脚本：

<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>

就像我上面说的，地图显示了，但样式没有生效。如果您能提供任何帮助，请告诉我。我真的很感激！

4

2 回答 2

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);

};
于 2013-02-27T18:10:25.233 回答
0

您需要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/

于 2013-02-27T18:09:47.427 回答