Google Maps Api v.3 方块填充颜色答案

【问题标题】：Google Maps Api v.3 squares fill colorGoogle Maps Api v.3 方块填充颜色
【发布时间】：2015-12-13 13:41:43
【问题描述】：

我正在使用 Google Maps Api v.3。我可以设置除正方形以外的所有元素的颜色（例如 伦敦的特拉法加尔广场）。我尝试了 Google Maps Api Wizzard 中的所有可用元素： http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html 但它们似乎都不会影响正方形。它们总是灰色的。

See print screen

感谢您的任何建议。

【问题讨论】：

你尝试了哪些？哪一个最接近你想要的？最近的那个有什么问题？
请花两分钟时间阅读stackoverflow.com/tour 的导览，以便您了解 StackOverflow 的内容并了解如何提出问题。这个问题不好，因为不清楚你做了什么，所以没有起点。当您完成整个游览时，您确实会获得一枚徽章作为奖励，它会让您在这里的体验变得更好。
我尝试了所有选项：administrator.geometry.fill、landscape.man_made.all、poi.geometry.fill、road.geometry.fill 等。它们都不是最接近的，它根本不起作用.除正方形外，所有元素都可以绘制。我只想改变正方形的填充颜色。

标签： google-maps google-maps-api-3

【解决方案1】：

Google 地图的样式是设置“正方形”颜色的地方。（假设您的讨论是指地图的基本背景）。要记住的重要一点是，样式是按照您对其进行编码的顺序应用的。所以你先设置基础。然后你开始在其他样式上分层。

在以下示例中，底色设置为#d400ff（淡紫色）。然后将landscape.man_made 设置为#00c3ff 并调整伽玛，以创建淡蓝色。然后设置其他对象的样式。

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Styling the base map example</title>
    <style>
      #map {
        width: 500px;
        height: 400px;
        background-color: #eee;
      }
      .heading {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 16px;
         color: #800000;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(-34.810861, 138.728223),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        map.set('styles',[
          {
            "stylers": [
              { "hue": "#d400ff" }
            ]
          },{
            "featureType": "landscape.man_made",
            "elementType": "geometry.fill",
            "stylers": [
              { "hue": "#00c3ff" },
              { "gamma": 0.65 }
            ]
          },{
            "featureType": "poi.park",
            "elementType": "geometry.fill",
            "stylers": [
              { "hue": "#33ff00" }
            ]
          },{
            "featureType": "poi.school",
            "elementType": "geometry.fill",
            "stylers": [
              { "hue": "#ff6e00" },
              { "gamma": 0.32 }
            ]
          },{
            "featureType": "road.local",
            "elementType": "geometry",
            "stylers": [
              { "hue": "#1900ff" },
              { "gamma": 0.28 }
            ]
          },{
            "featureType": "road.arterial",
            "elementType": "geometry",
            "stylers": [
              { "color": "#338080" },
              { "weight": 1.9 }
            ]
          }
        ]);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div class="heading">Styling the base map example</div>
    <div id="map"></div>
  </body>
</html>

http://googlemaps.github.io/js-samples/styledmaps/wizard/index.html

是一个用于设计地图“主题”的宝贵工具，您可以在其中尝试按正确顺序排列的不同元素

【讨论】：

非常感谢！ 效果很好！ 看起来正方形没有特定的样式，所以设置颜色的唯一方法是使用通用样式。
欢迎您。感谢您将答案设置为已接受。祝你有美好的一天:)