如何隐藏或显示谷歌地图图层？(How to hide or display a Google Map

我已经准备了一个简化的测试案例和屏幕截图。

我觉得我失去了一点点，只是几行代码。

我有2所覆盖（在天气和云在我的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>

您可以隐藏/显示与该层setMap方法：

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

见工作示例： http://jsfiddle.net/EeVUr/2/ （删除你的第二个复选框，因为你现在只有一层，但你可以轻松地创建两个不同的层，并切换他们。）

如何隐藏或显示谷歌地图图层？(How to hide or display a Google Map

Answer 1:

收藏的人(0)

如何隐藏或显示谷歌地图图层？(How to hide or display a Google Map

Answer 1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮