寻找在地图上隐藏或显示街道的正确方法

Question

我正在尝试在This Demo 的 Google 地图上隐藏/显示道路图层，这对我有用，但您可以看到代码在添加样式时重复了很多次！ 上：

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    map.set('styles', [{
        "featureType": "road",
            "stylers": [{
            "visibility": "off"
        }]
    }]);

    $('input:checkbox').change(function () {
        if ($(this).is(':checked')) {
            map.set('styles', [{
                "featureType": "road",
                    "stylers": [{
                    "visibility": "on"
                }]
            }]);
        } else {
            map.set('styles', [{
                "featureType": "road",
                    "stylers": [{
                    "visibility": "off"
                }]
            }]);
        }
    });

你能看一下演示，让我看看有什么更好的方法来实现这一点吗？无需多次重复样式？！

谢谢

Answer 1

您可以将样式保存在变量中，例如：

var stylesOff = [{
    "featureType": "road",
        "stylers": [{
        "visibility": "off"
    }]
}];

var stylesOn = [{
    "featureType": "road",
        "stylers": [{
        "visibility": "on"
    }]
}];

var myOptions = {
    zoom: 16,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: stylesOff
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        map.setOptions({
            styles: stylesOn
        });
    } else {
        map.setOptions({
            styles: stylesOff
        });
    }
});

注意使用setOptions，这是更改地图选项的文档化方法。

编辑：

正如您在评论中所说，您想独立切换多种样式，这是一个解决方案。

它使用输入 data 属性来识别复选框所指的样式。

<input type="checkbox" class="styles-control" data-style="road" checked="checked"> Roads
<input type="checkbox" class="styles-control" data-style="poi" checked="checked"> POI
<input type="checkbox" class="styles-control" data-style="administrative.locality" checked="checked"> Localities
<input type="checkbox" class="styles-control" data-style="water" checked="checked"> Water

基于此，您可以在其中一个复选框更改时构建样式数组：

// Get all styles controls
var controls = $('.styles-control');

$('.styles-control').change(function () {

    styles = [];

    // Loop through styles controls
    for (var i = 0; i < controls.length; i++) {

        if ($(controls[i]).is(':checked')) {

            // Push the feature type to the styles array
            // The feature type is based on the input data-style attribute
            styles.push({
                "featureType": $(controls[i]).data('style'),
                    "stylers": [{
                    "visibility": "on"
                }]
            });
        } else {
            styles.push({
                "featureType": $(controls[i]).data('style'),
                    "stylers": [{
                    "visibility": "off"
                }]
            });
        }
    }

    map.setOptions({

        styles: styles
    });
});

JSFiddle demo