Question

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

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

有没有办法如何做到这一点，如果是这样，你能告诉我该怎么做吗？

非常感谢提前！

Answer 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>

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

1 个答案: