打开/关闭天气图层与其他选择的组合

Question

我尝试在我的页面上实现此代码（https://dev59.com/zGPVa4cB1Zd3GeqP2h3l

请问有谁能提供正确的代码片段吗？我的页面在这里http://www.strahlen.org/map/mapplusweather.htm。 (de)select按钮已经在右下角。

先感谢了， Frank

附言: 尽管管理员删除了你的帖子，感谢Alexander Farber之前的帮助！

附言2: 当然，我已经使天气层正常工作了，请参见http://www.strahlen.org/map/mapweather.htm，但我不能切换它的打开和关闭。

*最后编辑* 为防止链接失效：现在我在“生产版本”中使用了这里的代码 ->http://www.strahlen.org/map/

- Frank

---

你为大多数复选框添加了addDOMListener，但是我在mapplusweather中没有看到天气复选框的单击操作。我错过了吗？如果没有它们，什么也不会发生。 - Andrew Leach

我绝对不是一个程序员。我只是复制/粘贴别人使用的代码片段，然后学习、学习、再学习。所以，感谢你的初步回答。我会尽快努力学习，并在理解更多后再与你联系。干杯！Frank - Frank

安德鲁，有了你的帮助，我又迈出了一步。谢谢，我现在明白得多了。我已经更改了代码，现在可以通过单击来启动天气和/或云层了。请参见 http://www.strahlen.org/map/mapplusweather.htm 。但是，我如何在取消选择时关闭该图层呢？干杯！弗兰克 - Frank

Answer 1

我已经查看了您的网站，我认为您只需要对现有代码进行一些基本更改。首先，在您的 initialize() 函数中添加两个新变量：

function initialize() {
    var tableId = 3167783;
    var cloudDisplayIsOn = false;
    var weatherDisplayIsOn = false;

接下来，在您现有的云click监听器代码中，进行以下更改：

google.maps.event.addDomListener(document.getElementById('cloud'),
    'click', function() {
        if ( cloudDisplayIsOn ) {
            cloudLayer.setMap( null );
            cloudDisplayIsOn = false;
        }
        else {              
            cloudLayer.setMap( map );
            cloudDisplayIsOn = true;
        }
    });

最后，在您现有的天气点击监听器代码中，进行非常相似的更改：

google.maps.event.addDomListener(document.getElementById('weather'),
    'click', function() {
        if ( weatherDisplayIsOn ) {
            weatherLayer.setMap( null );
            weatherDisplayIsOn = false;
        }
        else {
            weatherLayer.setMap( map );
            weatherDisplayIsOn = true;
        }
    });

现在你可能需要进行一些小的调试，但我相信这将为cloudLayer和weatherLayer添加所需的开关代码。

- Sean Mickey

---

亲爱的Sean，非常感谢你的帮助。请给我几周时间来测试这个，因为我昨晚刚当上了父亲 ;) 我会在有睡眠/时间等条件下尽快回复你;) 干杯！ - Frank

哇-恭喜！不用紧张，也不用着急-感谢提醒。 - Sean Mickey

太好了，有了你的帮助它终于可以工作了！我想我们做到了 :) 在换尿布的时间里 :) 我稍微调整了一下你的代码。非常好。你能检查一下它是否也对你起作用吗？-> http://www.strahlen.org/map/mapplusweathertest.htm - Frank

是的，我刚刚检查了一下，你做得很好。有时候你需要缩小一点才能看到云层，但是天气图层和云图层都可以非常好地开启/关闭。祝你享受新生命的降临！ - Sean Mickey

谢谢 ;) 我们都很棒。说：我还不太熟悉stackoverflow，我需要点击哪里来感谢你的大力帮助吗？ - Frank

是的 :) 如果你认为某个回答解决了你的问题，你可以点击问题旁边的勾号形状（然后它会变成绿色）。如果你还认为我的回答质量很高，你也可以通过点击问题旁边投票计数器上面的向上箭头来点赞。谢谢你的记忆 - - Sean Mickey

Answer 2

我正在尝试执行类似的功能，但有所不同。以下代码是当前使用的geeToggleLayer函数，来自我们地图服务器页面引用的fusion_maps_v3.js文件。我正在尝试消除复选框切换，而是让用户通过单击图层标签来切换可见性。

    function geeToggleLayer(e, checkBoxId, channel, glmId, layerName) {
      try {
        var cb = document.getElementById(checkBoxId);
        var id = glmId + '-' + channel;

        // toggle layer visibility via clicking checkbox
        try {
          if (cb.checked) {
            geeMap.showFusionLayer(id);
          } else {
            geeMap.hideFusionLayer(id);
          }
        } catch (err2) {
          alert('Failed attempt to enable/disable layer: ' +
                layerName + '\n' + id + '\n' + err2);
        }
      } catch (err) {
        alert('Failed attempt to get checkbox for layer: ' +
              layerName + '\n' + err);
      }
      cancelEvent(e);
    }

- gannman