Wie kann Google Maps Layer ausgeblendet oder angezeigt werden?

Ich habe einen vereinfachten Testfall und einen Screenshot vorbereitet.Wie kann Google Maps Layer ausgeblendet oder angezeigt werden?

Ich glaube, ich vermisse ein kleines bisschen, nur ein paar Zeilen Code.

Ich habe 2 Overlays (die weather and clouds) in meinem JavaScript Google Map und möchte sie verstecken oder zeigen, wenn ein entsprechendes Kontrollkästchen angeklickt wird:

enter image description here

Hier ist der Testfall, fügen Sie einfach es in eine HTML-Datei und es wird ausgeführt:

<!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>

UPDATE: Danke, hier eine funktionierende Version für alle

<!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>

Quelle

2012-04-25 Alexander Farber

können Sie verstecken/zeigen die Schicht mit setMap Methode:

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

Siehe Arbeitsbeispiel: http://jsfiddle.net/EeVUr/2/ (Ihre zweite Checkbox entfernt, da Sie nur eine Schicht jetzt haben. Aber Sie können zwei verschiedene Schichten leicht herstellen und sie schalten.)

Quelle

2012-04-25 15:21:40 TMS

Wie kann Google Maps Layer ausgeblendet oder angezeigt werden?

Antwort

Verwandte Themen