如何使用复选框打开和关闭Google地图图层？

我试图使用复选框将Google地图的流量，云和天气图层添加到Google地图中。但是，当我尝试这样做时，无论框被选中还是未选中，所有图层都会消失。我从来没有在Javascript中做过这样的事情，而且我对Javascript真的很陌生，所以我不知道我做错了什么。这是我的代码，任何帮助都会很棒！如何使用复选框打开和关闭Google地图图层？

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

来源

2013-03-09 kduan

您否则，如果要阅读as weatherLayer.setMap（null） – Rafe 2013-03-09 15:04:41

哦，是的，我改变了，仍然没有工作 – kduan 2013-03-09 16:13:54

使用天气图层，你需要在全球范围内的library
启用和禁用层（其中HTML点击监听器运行），你的映射需要是全局的（在任何函数之外定义它，但是在onload事件中初始化它）
您还需要在全局范围内定义图层。
显示层，使用的setMap（地图），以隐藏它使用的setMap（空）

修改 “检查” 功能：

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);} 
}

working example

来源

2013-03-09 16:17:58 geocodezip

谢谢！尽管我仍然在地图上遇到了一些问题。如果我在代码中选中或取消选中框，它将正常运行，但是当我在浏览器中点击复选框时，没有任何更改。你知道为什么发生这种情况吗？谢谢！ – kduan 2013-03-09 16:58:25

看看我的[工作示例]（http://www.geocodezip.com/v3_simpleMap_layers.html），该工程（至少在Chrome中）。 – geocodezip 2013-03-09 17:05:15

这里是前一个问题，处理检查复选框的变化http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events我也记得我还记得云覆盖不会在某个缩放级别下显示？ – Rafe 2013-03-09 17:08:22

如何使用复选框打开和关闭Google地图图层？

回答

相关问题