Question

最近我发现a way更改了谷歌地图的外观，如下图所示

enter image description here

在帮助菜单中，建议JSON可用于修改默认地图或创建新样式。即使我可以获得代码并理解其含义，但我不知道如何以及在何处使用它来创建黑白地图样式。我怎么能这样做？

代码是

[
  {
    "featureType": "landscape",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "color": "#000000" }
    ]
  },{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "color": "#ffffff" }
    ]
  }
]

Google建议a way，但我不知道如何应用它。例如MapOptions在哪里？

任何想法都非常受欢迎！

Answer 1

以下是您可以遵循的完整示例：
我在这里添加了所有内容。

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps</title>

        <style> #map-canvas { margin: 0; padding: 0; height: 400px; width: 100%; }
        </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script>
  function initialize() {

    var styles = [
    {
      "featureType": "landscape",
      "stylers": [
        { "color": "#ffffff" }
      ]
    },{
      "featureType": "road",
      "stylers": [
        { "color": "#000000" }
      ]
    },{
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
        { "color": "#ffffff" }
      ]
    },{
      "featureType": "poi",
      "stylers": [
        { "color": "#ffffff" }
      ]
    }
  ];

    google.maps.visualRefresh = true;
    var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
    var mapDiv = document.getElementById('map-canvas');

  var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    map = new google.maps.Map(mapDiv, myOptions);
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

}

google.maps.event.addDomListener(window, 'load', initialize);

  </script>

  </head>
  <body>
    <div id="map-canvas">
  </body>
</html>

如何更改默认的谷歌地图

1 个答案: