谷歌地图 - 使用自定义JSON样式*和*地形视图

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

你的最后一行：

这会导致地图类型被重置为您的地图类型的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

基于@马诺的回答，您可以只包括就在mapOptions样式选项：

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