样式化地图：如何控制特定缩放级别的元素的可见性？答案

【问题标题】：Styled Maps: How can I control visibility of elements for specific zoom level?样式化地图：如何控制特定缩放级别的元素的可见性？
【发布时间】：2013-08-04 10:00:36
【问题描述】：

我正在尝试使用 Goolge Maps API v3 中的地图样式器创建样式地图。一切正常，除了我找不到为特定缩放级别的元素添加样式的方法。

例如，我只希望road.highway 以更高的缩放级别显示，否则整个地图都会被高速公路弄得乱七八糟。我曾尝试使用weight 属性，但即使在高缩放级别下，这也会使高速公路变窄。

有没有办法做到这一点，如果可以，请告诉我如何做到这一点？

非常感谢！

【问题讨论】：

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

【解决方案1】：

通过创建不同风格的不同google.maps.StyledMapType对象，然后设置一个事件监听器来监听Map对象的'zoom_changed'事件。这应该会给你一些想法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Styled Map</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

/***
SEE:
https://developers.google.com/maps/documentation/javascript/styling
ALSO, GOOGLES STYLED MAP WIZARD:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
***/

function initialize() {
    var gm = google.maps,
        darkStylers = [
            {stylers:[{invert_lightness:true}]}
        ],
        lightStylers = [
            {stylers:[{saturation:-100}]}
        ],
        darkStyle = new gm.StyledMapType(darkStylers, {name: 'Dark Style'}),
        lightStyle = new gm.StyledMapType(lightStylers, {name: 'Light Style'}),
        mapOptions = {
            zoom: 7,
            mapTypeControl:false,
            center: new gm.LatLng(32.8297,-96.6486),
            mapTypeId: gm.MapTypeId.ROADMAP
        },
        map = new gm.Map(document.getElementById('map_canvas'), mapOptions);
    //add two new MapTypes to the maps mapTypes
    map.mapTypes.set('Dark_Map', darkStyle);
    map.mapTypes.set('Light_Map', lightStyle);
    //set our maps initial style
    map.setMapTypeId('Dark_Map');
    gm.event.addListener(map, 'zoom_changed', function () {
        var zoom = this.getZoom();
        if (zoom < 9) {
            map.setMapTypeId('Dark_Map');
        } else {
            map.setMapTypeId('Light_Map');
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map_canvas" style="width:780px; height:600px; margin:10px auto;"></div>
</body>
</html>

【讨论】：

谢谢，我没想过以编程方式进行。我认为只有一个属性来设置重要性或类似的东西。但是您的解决方案肯定是个好主意！
我正在尝试使状态标签 (administrative.province) 在更高的缩放级别下可见，据我所知，这是不可能的，即使以编程方式切换样式也是如此。我很想找到一种方法来使用样式器在特定缩放级别控制某些元素（标签）的可见性，但看起来这不是 API 的一部分。 ...我很想被证明是错误的！
@Sam H，据我所知，我无法通过默认 api 以最小缩放级别 0、1 和 2 切换它们。不知道你为什么想要标签，无论如何，你已经达到了宇航员的视野水平，标签必须非常小才能相互适应，以至于你根本无法很好地阅读它们。我想您实际上可以添加自己的标签，也许可以玩一下：github.com/erunyon/ELabel 或者制作自己的自定义叠加层