Google-Maps v3: Как изменить стиль карты в зависимости от уровня масштабирования?

Question

Я использую новую КАРТУ Google Maps v3.

Я хочу изменить стиль карты на основе уровня масштабирования.

У меня есть следующий псевдокод, как изменить стиль карты в зависимости от уровня масштабирования?

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 , я собрал тестовый пример из вашего исходного кода (с фактическими значениями, чтобы тест работал).

Ниже приведен код IПри успешном тестировании основной код, на который следует обращать внимание, находится в функции 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');
  }
});