谷歌地圖 - 使用自定義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 
};