2

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

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

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

提前谢谢了！

4

1 回答 1

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>
于 2013-08-03T12:51:47.353 回答