Question

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

See print screen

感谢您的任何建议。

Answer 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

谷歌地图Api v.3正方形填充颜色

1 个答案: