Question

我尝试使用多个标记进行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');

Answer 1

这部分代码错误，会阻止地图加载：

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

mapTypeId必须是1个有效mapType，而不是数组。您可以完全删除此行。

如果要为这些mapType绘制控件，则必须设置mapTypeIds - 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']
      }
     });

现在，您的地图应显示2个所需的mapType - 控件。

要应用灰度，请将saturation设置为-100

仅在Google Map Terrain中应用灰度

1 个答案: