Google地图 - 使用自定义json样式*和* TERRAIN视图

Question

所以我创建了一些自定义JSON来使海洋更加饱和，但现在似乎无法将地图默认为TERRAIN视图，它只是转到标准的ROADMAP视图，似乎无法正常工作为什么会发生这种情况，有什么想法吗？

function initialize() {

  // Create an array of styles.
  var blueOceanStyles = [
    {
      featureType: "water", 
      stylers: [ 
        { hue: "#4b83d4" },
        { saturation: 53 } 
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var blueOceanType = new google.maps.StyledMapType(blueOceanStyles,
    {name: "Blue Oceans"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 0),
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'blue_oceans']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('blue_oceans', blueOceanType);
  map.setMapTypeId('blue_oceans');
}

Answer 1

你的最后一行：

  map.setMapTypeId('blue_oceans');

这会导致地图类型重置为您的地图类型为blue_oceans地图类型。您是否尝试创建两种不同的地图类型？或者你只想要一个具有你风格的地形类型？如果是后者，请尝试这样做：

      function initialize() {

  // Create an array of styles.
  var blueOceanStyles = [
    {
      featureType: "water", 
      stylers: [ 
        { hue: "#4b83d4" },
        { saturation: 53 } 
      ]
    }
  ];

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(50, 0),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.setOptions({styles: blueOceanStyles});
}

Answer 2

根据@Mano的回答，你可以在mapOptions中包含样式选项：

var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(50, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN,
styles: blueOceanStyles
};