0

最近我发现了一种改变谷歌地图外观的方法，如下图所示

在此处输入图像描述

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

代码是

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

谷歌提出了一种方法，但我不知道如何应用它。例如在哪里MapOptions？

任何想法都非常受欢迎！

4

1 回答 1

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>
于 2013-10-09T17:52:57.780 回答