0

最近、次の画像が示すように、Google マップの外観を変更する方法を見つけました。

ここに画像の説明を入力

ヘルプ メニューではJSON、デフォルト マップの変更または新しいスタイルの作成に使用できることがアドバイスされています。コードを取得してその意味を理解することはできますが、それを使用して白黒のマップ スタイルを作成する方法と場所がわかりません。どうやってやるの？

コードは

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

Googleは方法を提案していますが、それを適用する方法がわかりません。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 に答える