Jak ukryć lub wyświetlić warstwę Google Maps?
Przygotowałem uproszczony przypadek testowy i zrzut ekranu.
Myślę, że brakuje mi trochę, tylko kilka linii kodu.
Mam 2 nakładki (pogoda i chmury) na mojej Mapie Google JavaScript i chciałbym je ukryć lub pokazać, gdy kliknięto odpowiednie pole wyboru:
Oto przypadek testowy, wystarczy wkleić go do pliku .html i zostanie uruchomiony:
<code><!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> </code>
AKTUALIZACJA: Dzięki, tutaj działa wersja robocza dla wszystkich
<code><!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> </code>