Google-Maps v3: Cách thay đổi kiểu bản đồ dựa trên mức thu phóng?

Question

Tôi đang sử dụng Google Maps v3 STYLED MAP mới.

Tôi muốn thay đổi cách bản đồ được tạo kiểu dựa trên mức thu phóng.

Tôi có mã giả sau, cách thay đổi kiểu bản đồ của tôi dựa trên mức thu phóng?

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

Cảm ơn trước

Answer 1

Sử dụng Google maps API V3, tôi đặt lại với nhau một ví dụ kiểm tra từ mã nguồn của bạn (với giá trị thực tế để thực hiện các công việc kiểm tra).

Dưới đây là mã tôi đã sử dụng để kiểm tra thành công, mã chính cần chú ý là trong hàm 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

Tôi lấy cảm hứng từ giải pháp @staticbeast và thực hiện một số phép tái cấu trúc.

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