¿Cómo activar y desactivar las capas de mapas de Google con casillas de verificación?

Estoy tratando de agregar capas alternables de tráfico, nubes y clima a los mapas de Google usando casillas de verificación. Sin embargo, cuando trato de hacerlo, todas las capas desaparecen sin importar si las casillas estaban marcadas o desmarcadas. Nunca he hecho nada como esto en Javascript y soy realmente nuevo en Javascript, así que no tengo idea de lo que estoy haciendo mal. Aquí está mi código, ¡cualquier ayuda será genial!

JavaScript:

        function check() 
    {
        var weatherLayer = new google.maps.weather.WeatherLayer({
        temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
        });
        var trafficLayer = new google.maps.TrafficLayer();
        var cloudLayer = new google.maps.weather.CloudLayer();

        if(document.getElementById('weather').checked)

        {weatherLayer.setMap(map);}

        else if(!document.getElementById('weather').checked)

        {weatherLayer.setMap(map);}

        cloudLayer.setMap(map);

        trafficLayer.setMap(map);
    }

html

        <label><input type="checkbox" id="weather" checked="checked" onclick="check()" />Weather</label>
        <label><input type="checkbox" id="clouds" onclick="check()" />Clouds</label>
        <label><input type="checkbox" id="traffic" onclick="check()" />Traffic</label>

preguntado el 09 de marzo de 13 a las 14:03

Su otro si debería leerse como weatherLayer.setMap (null) -

Oh, sí, cambié eso. Todavía no funcionó.

1 Respuestas

  1. para usar la capa meteorológica, debe incluir el bibliotecas
  2. para habilitar y deshabilitar capas en el ámbito global (donde se ejecutan los detectores de clics HTML), su mapa debe ser global (defínalo fuera de cualquier función, pero inicialícelo en el evento onload)
  3. también necesita definir sus capas en el ámbito global.
  4. para mostrar una capa, use setMap (mapa), para ocultarla use setMap (null)

función "verificar" modificada:

    function check() 
{

    if(document.getElementById('weather').checked)

      {weatherLayer.setMap(map);}

    else 

      {weatherLayer.setMap(null);}

    if(document.getElementById('clouds').checked)

      {cloudLayer.setMap(map);}

    else 

      {cloudLayer.setMap(null);}

    if(document.getElementById('traffic').checked)

       {trafficLayer.setMap(map);}

    else

       {trafficLayer.setMap(null);}
}

ejemplo de trabajo

respondido 09 mar '13, 16:03

¡Gracias! Aunque todavía tengo algunos problemas con el mapa. Si configuro las casillas marcadas o desmarcadas en el código, funciona bien, pero cuando presiono la casilla de verificación en un navegador, nada cambia. ¿Sabes por que pasa esto? ¡Gracias! - kduan

Mira mi ejemplo de trabajo, eso funciona (al menos en Chrome). - geocodezip

Aquí hay una pregunta anterior que trata sobre marcar el cambio de casillas de verificación. stackoverflow.com/questions/4471401/… También creo recordar haber visto que la cobertura de nubes no se muestra bajo un cierto nivel de zoom. - Rafe

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.