寻找一种在地图上隐藏或显示街道的正确方法 [英] Looking For a Correct Way to Hide or Display Streets on Map

问题描述

我正尝试在此演示上在Google地图上隐藏/显示道路图层.为我工作，但如您所见，代码多次以添加样式重复！ 上:

I am trying to Hide/ Display Roads layers on Google Map at This Demo which is working for me but as you can see the code is duplicated in adding style many times! on:

  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"
                }]
            }]);
        }
    });

能否请您看一下演示，让我看看实现此目标的更好方法是什么?不重复很多次的样式?！

can you please take a look at demo and let me what is a better way to achieve this? without repeating the style many times?!

谢谢

推荐答案

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

You could hold the styles in a variable for example:

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，这是记录的更改地图选项的方法.

Mind the use of setOptions which is the documented method to change map options.

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

As you said in your comment that you want to toggle multiple styles independently, here is a solution.

它使用输入的data属性来标识复选框所引用的样式.

It uses the inputs data attributes to identify which style the checkbox refers to.

<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

基于此，您可以在复选框之一更改时构建样式数组:

Based on that, you can build your array of styles when one of the checkbox changes:

// 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演示

这篇关于寻找一种在地图上隐藏或显示街道的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！