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

因此，我创建了一些自定义 JSON 以使海洋更加饱和的蓝色，但现在似乎无法将地图默认为地形视图，它只是转到标准路线图视图，似乎无法弄清楚为什么会这样正在发生，有什么想法吗？

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');
}

你的最后一行：

  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});
}