5

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

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

1 回答 1

6
  1. 要使用天气层，您需要包含库
  2. 要在全局范围内启用和禁用图层（HTML 点击侦听器运行的地方），您的地图需要是全局的（在任何函数之外定义它，但在 onload 事件中对其进行初始化）
  3. 您还需要在全局范围内定义图层。
  4. 显示一个图层，使用 setMap(map)，隐藏它使用 setMap(null)

修改“检查”功能：

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

工作示例

于 2013-03-09T16:17:58.743 回答