Question

我有以下自定义Google地图：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 700px;
        height: 700px;
      }
    </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(41.2048114,8.0734625),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

来源：https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

使用官方指南，我无法弄清楚我应该在哪里添加以下代码：

map.set('styles', [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { color: '#000000' },
      { weight: 1.6 }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { saturation: -100 },
      { invert_lightness: true }
    ]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      { hue: '#ffff00' },
      { gamma: 1.4 },
      { saturation: 82 },
      { lightness: 96 }
    ]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [
      { hue: '#fff700' },
      { lightness: -15 },
      { saturation: 99 }
    ]
  }
]);

来源：https://developers.google.com/maps/documentation/javascript/styling

Answer 1

您应该在地图选项中添加它：

var mapOptions = {
  center: new google.maps.LatLng(41.2048114,8.0734625),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { color: '#000000' },
      { weight: 1.6 }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { saturation: -100 },
      { invert_lightness: true }
    ]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      { hue: '#ffff00' },
      { gamma: 1.4 },
      { saturation: 82 },
      { lightness: 96 }
    ]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [
      { hue: '#fff700' },
      { lightness: -15 },
      { saturation: 99 }
    ]
  }
]
}

Answer 2

另一个选项（除了将其放在google.maps.Map构造函数中的mapOptions中）是在定义initialize变量之后将代码放在map函数中：

fiddle

代码段

＆＃13;

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(41.2048114, 8.0734625),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  map.set('styles', [{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{
      color: '#000000'
    }, {
      weight: 1.6
    }]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [{
      saturation: -100
    }, {
      invert_lightness: true
    }]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [{
      hue: '#ffff00'
    }, {
      gamma: 1.4
    }, {
      saturation: 82
    }, {
      lightness: 96
    }]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [{
      hue: '#fff700'
    }, {
      lightness: -15
    }, {
      saturation: 99
    }]
  }]);

}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map {
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

在我的Google地图代码中，我是否添加了地图样式的代码？

2 个答案: