1

複数のマーカーを使用して Google マップを作成しようとしましたが、Google マップ スタイルを適用しなくても機能しますが、背景をグレースケールに設定するとマップが表示されないようです。マーカーの色を維持したいので、CSS スタイルはオプションではありません。コードは以下で見ることができます

function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [

        { saturation: -20 }
      ]
    }
  ];

 var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

    var locations = [
      ['United States', 38.976492, -103.875732, 3],
      ['Europe', 54.747569, 112.421105,346.289063, 3]

    ];

var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 3,
      center: new google.maps.LatLng(45.92, 1.25),
      mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
     map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
4

1 に答える 1

0

コードのこの部分が間違っているため、マップの読み込みが妨げられます。

mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']

mapTypeIdmapType配列ではなく、正確に 1 有効でなければなりません。この行は完全に削除できます。

これらの mapTypes のコントロールを描画する場合は、代わりに -propertyのmapTypeIds-option を設定する必要があります。mapTypeControlOptions

var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 3,
      center: new google.maps.LatLng(45.92, 1.25),
      mapTypeControlOptions: {
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
      }
     });

mapType2 つの必要な-controlsを使用してマップが表示されるはずです。

グレースケールを適用するsaturationには-100

于 2013-08-31T23:20:16.990 に答える