谷歌地图API v3没有被格式化

Google Map API v3 not being stylized

本文关键字：格式化 API v3 谷歌地图      更新时间：2023-09-26

我试着找了一段时间，我似乎找不到答案。我实现了谷歌地图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>

就像我上面说的，地图显示了，但是样式没有生效。如果你能帮忙，请告诉我。我真的很感激!

您创建了您的样式，但是您还没有将它们应用到您的映射…

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

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

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

相关文章：