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

【问题标题】：Google-Maps v3: How to change the map style based on zoom level?Google-Maps v3：如何根据缩放级别更改地图样式？
【发布时间】：2010-06-25 20:57:57
【问题描述】：

我正在使用新的 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 
});

提前致谢

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案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);

【讨论】：

最后 4 行是干什么用的？我在地图中使用了您的答案，无论如何它都可以在没有它们的情况下工作。
最后四行只是告诉页面在窗口加载后运行启动功能（前两行用于现代浏览器，第二行用于旧版 IE）。如果您以不同的方式触发该功能，则不需要它们。

【解决方案2】：

简单的功能，放大时去卫星，缩小时去路线图

google.maps.event.addListener(map, 'zoom_changed', function() {
    if (map.getZoom() >= 15) {
        map.setMapTypeId('satellite');
    }
    else {
        map.setMapTypeId('roadmap');
    }
});

【讨论】：

【解决方案3】：

我受到@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');
  }
});

【讨论】：