Как скрыть или отобразить слой Google Maps?

Я подготовил упрощенный контрольный пример и скриншот.

Я думаю, что мне не хватает чуть-чуть, всего несколько строк кода.

У меня есть 2 оверлея ( погода и облака) на моей карте Google JavaScript, и я хочу скрыть или показать их, когда установлен соответствующий флажок:

Вот тестовый пример, просто вставьте его в файл.html, и он запустится:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1,p { 
        text-align: center; 
    }

    #map { 
        width: 700px; 
        height: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        background-color: #CCCCFF; 
    }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    findCity('Berlin');

    $('#weather_box,#clouds_box').click(function(){
        alert('How to hide/show layers? Checked: ' + $(this).is(':checked'));
    });
});

function createMap(center) {
    var opts = {
        zoom: 6,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById('map'), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode({address: city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            var map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos,
                animation: google.maps.Animation.DROP
            });
            var weatherLayer = new google.maps.weather.WeatherLayer({
                temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
            });
            weatherLayer.setMap(map);
            //var cloudLayer = new google.maps.weather.CloudLayer();
            //cloudLayer.setMap(map);
        }
    });
}
</script>
</head>
<body>
<h1>Berlin</h1>
<p>Show:
<label><input type="checkbox" id="weather_box" checked>weather</label>
<label><input type="checkbox" id="clouds_box">clouds</label>
</p>
<div id="map"></div>
</body>
</html>

ОБНОВЛЕНИЕ: Спасибо, здесь рабочая версия для всех

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1,p { 
        text-align: center; 
    }

    #map { 
        width: 700px; 
        height: 400px; 
        margin-left: auto; 
        margin-right: auto; 
        background-color: #CCCCFF; 
    }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de&libraries=weather"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

var map;
var WeatherLayer;
var CloudsLayer;

$(function() {
    findCity('Berlin');

});

function createMap(center) {
    var opts = {
        zoom: 6,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    return new google.maps.Map(document.getElementById('map'), opts);
}

function findCity(city) {
    var gc = new google.maps.Geocoder();
    gc.geocode({address: city}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var pos = results[0].geometry.location;
            map = createMap(pos);
            var marker = new google.maps.Marker({
                map: map, 
                title: city,
                position: pos,
                animation: google.maps.Animation.DROP
            });
            weatherLayer = new google.maps.weather.WeatherLayer({
                temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
            });
            weatherLayer.setMap(map);
            cloudsLayer = new google.maps.weather.CloudLayer();
            //cloudsLayer.setMap(map);

            $('#weather_box').click(function(){
                weatherLayer.setMap($(this).is(':checked') ? map : null);
            });

            $('#clouds_box').click(function(){
                cloudsLayer.setMap($(this).is(':checked') ? map : null);
            });

            $('#weather_box,#clouds_box').removeAttr('disabled');
        }
    });
}
</script>
</head>
<body>
<h1>Berlin</h1>
<p>Show:
<label><input type="checkbox" id="weather_box" disabled="true" checked>weather</label>
<label><input type="checkbox" id="clouds_box" disabled="true">clouds</label>
</p>
<div id="map"></div>
</body>
</html>
Источник

2 ответа

Решение

Вы можете скрыть / показать слой с setMap метод:

if ($(this).is(':checked'))
    weatherLayer.setMap(map); // show
else
    weatherLayer.setMap(null); // hide

См. Рабочий пример: http://jsfiddle.net/EeVUr/2/ (убрал ваш второй флажок, так как теперь у вас есть только один слой. Но вы можете легко создать два разных слоя и переключать их.)

Источник

Если вы используете декгл вместе с декгл, установите для свойства visible значение true или false. и в updateTriggers сохраните переменную, которая определяет видимость

например:

      new GeoJsonLayer({
    ...otherProps,
    updateTriggers: {
      visible: [decisionVariable],
    }
    visible: decisionVariable ? true : false,
})
Источник
Другие вопросы по тегам