Google-Maps v3：如何根据缩放级别更改地图样式？

Question

我正在使用新的Google Maps v3 STYLED MAP。

我想根据缩放级别更改地图的样式。

我有以下伪代码，如何根据缩放级别更改我的地图样式？

var myOptions = { 
     zoom:  zoom, 
     center: latlng, 
     disableDefaultUI: true, 
     navigationControl: true, 
     scrollwheel: false, 
     navigationControlOptions: {style: 
google.maps.NavigationControlStyle.SMALL,position: 
google.maps.ControlPosition.TOP_RIGHT}, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var mapStyleZoomedOut = [{  featureType: "landscape", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
               }]; 
var mapStyleZoomedIn = [{  featureType: "landscape", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
                },{ 
                featureType: "poi", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
                }]; 
map = new google.maps.Map(document.getElementById("find-map"), 
myOptions); 
var styledMapOptions = {map: map}; 
var styleMapType = new google.maps.StyledMapType(mapStyle, 
mapStyleZoomedOut); 
map.mapTypes.set('minimial', styleMapType); 
map.setMapTypeId('minimial'); 
google.maps.event.addListener(map, 'zoom_changed', function() { 
     // === IF Zoom Level <= 8 use mapStyleZoomedIn 
     // === If Zoom Level > 8 use mapStyleZoomedOut 
}); 

在此先感谢

Answer 1

使用Google maps API V3，我放在一起测试例如从源代码（与实际值，以使测试工作）。

下面是我用来测试成功的代码，要注意的主要代码是在start（）函数中。

var myOptions = { 
     zoom: 7, 
     center: new google.maps.LatLng(1,1), 
     disableDefaultUI: true, 
     navigationControl: true, 
     scrollwheel: false, 
     navigationControlOptions: {style: 'SMALL',position: 'TOP_RIGHT'}, 
     mapTypeId: 'ROADMAP' 
}; 

var mapStyleZoomedOut = [{  featureType: "landscape", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
               }]; 
var mapStyleZoomedIn = [{  featureType: "landscape", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
                },{ 
                featureType: "poi", 
                elementType: "all", 
                stylers: [{ visibility: "off" }] 
                }]; 
function start() 
{ 
    map = new google.maps.Map(document.getElementById("find-map"), myOptions); 
    var styledMapOptions = {map: map, name: 'minimial'}; 
    var styledMapOptions2 = {map: map, name: 'maximial'}; 

    var sMapType = new google.maps.StyledMapType(mapStyleZoomedOut,styledMapOptions); 
    map.mapTypes.set('minimal', sMapType); 
    map.setMapTypeId('minimal'); 

    var sMapType2 = new google.maps.StyledMapType(mapStyleZoomedIn,styledMapOptions2); 
    map.mapTypes.set('maximial', sMapType2); 

    google.maps.event.addListener(map, 'zoom_changed', function() 
    { 
    var zoomLevel = map.getZoom(); 
    //DEBUG alert(zoomLevel+', '+map.getMapTypeId()); 
    var sMapType; 
    // === IF Zoom Level <= 8 use mapStyleZoomedIn 
    if(zoomLevel <=8) 
     map.setMapTypeId('maximial'); 
    // === If Zoom Level > 8 use mapStyleZoomedOut 
    else 
     map.setMapTypeId('minimal'); 
    }); 
} 

if (window.addEventListener) 
    window.addEventListener("load", start, false); 
else if (window.attachEvent) 
    window.attachEvent("onload", start); 

Answer 2

我受@staticbeast解决方案的启发，做了一些重构。

map.mapTypes.set('maximal', new google.maps.StyledMapType(mapStyleZoomedIn, {map: map, name: 'maximal'})); 
map.mapTypes.set('minimal', new google.maps.StyledMapType(mapStyleZoomedOut, {map: map, name: 'minimal'})); 
map.setMapTypeId('minimal'); 

google.maps.event.addListener(map, 'zoom_changed', function() { 
    if (map.getMapTypeId() !== 'satellite') { 
    map.setMapTypeId(map.getZoom() <= 8 ? 'min' : 'max'); 
    } 
});