使用单选按钮在谷歌地图上切换自定义图例答案

【问题标题】：Toggle custom legend on google maps using a radio button使用单选按钮在谷歌地图上切换自定义图例
【发布时间】：2015-08-21 00:28:14
【问题描述】：

我使用来自Google Developers Website 的以下代码为谷歌地图创建了一个图例

    <title>Fusion Tables Layer Example: Legend</title>

    <link href="/apis/fusiontables/docs/samples/style/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <style type="text/css">
      #legend {
        background: #FFF;
        padding: 10px;
        margin: 5px;
        font-size: 12px;
        font-family: Arial, sans-serif;
      }

      .color {
        border: 1px solid;
        height: 12px;
        width: 12px;
        margin-right: 3px;
        float: left;
      }

      .red {
        background: #C00;
      }

      .yellow {
        background: #FF3;
      }

      .green {
        background: #6F0;
      }

      .blue {
        background: #06C;
      }

      .purple {
        background: #63C;
      }
    </style>

    <script type="text/javascript">

      function initialize() {

        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: new google.maps.LatLng(37.4, -90.1),
          zoom: 3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'Location',
            from: '1NIVOZxrr-uoXhpWSQH2YJzY5aWhkRZW0bWhfZw'
          },
          map: map
        });

        // Create the legend and display on the map
        var legend = document.createElement('div');
        legend.id = 'legend';
        var content = [];
        content.push('<h3>Butterflies*</h3>');
        content.push('<p><div class="color red"></div>Battus</p>');
        content.push('<p><div class="color yellow"></div>Speyeria</p>');
        content.push('<p><div class="color green"></div>Papilio</p>');
        content.push('<p><div class="color blue"></div>Limenitis</p>');
        content.push('<p><div class="color purple"></div>Myscelia</p>');
        content.push('<p>*Data is fictional</p>');
        legend.innerHTML = content.join('');
        legend.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

但是，我想包含两个单选按钮，如果选中第一个单选按钮，则应该出现图例，如果选中第二个单选按钮，则图例应该消失。

我尝试并搜索但无法使其工作。任何帮助表示赞赏。

已编辑：感谢 geocodezip，我设法使它工作。请查看this

【问题讨论】：

Simple setting off display: none / block with javascript的可能重复
您所说的“单选按钮”是指复选框吗？喜欢this？
感谢您的帮助，它适用于复选框，但我的意思是 type='radio' 。所以从技术上讲，我需要其中两个用于 ON，另一个用于 OFF。
请更新您的问题，使其更具体，并展示您的尝试。
好的，我设法让它工作了。我使用了两个函数和两个按钮 function showHide(id) { var el = document.getElementById(id); el.style.display = '块'; } 函数隐藏（id）{ var el = document.getElementById(id); el.style.display = '无';我不知道是否还有其他方法可以做到这一点。再次感谢

标签： javascript html google-maps google-maps-api-3 google-fusion-tables

【解决方案1】：

从this question (Simple setting off display: none / block with javascript)修改showHide函数：

function showHide(id, btn) {
    var el = document.getElementById(id);
    var btns = document.getElementsByName(btn.name);
    for (var i=0; i<btns.length; i++) {
        if (btns[i].checked && btns[i].value == "ON")
            el.style.display = 'block';
        if (btns[i].checked && btns[i].value == "OFF")
            el.style.display = 'none';
    }
}

像这样使用它：

showLegend
<label class='radio inline'>ON</label>
<input type='radio' name='types' value="ON" checked="checked" onchange="showHide('legend', this);" />
<label class='radio inline'>OFF</label>
<input type='radio' name='types' value="OFF" onchange="showHide('legend', this);" />

proof of concept fiddle

代码 sn-p：

function initialize() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(37.4, -90.1),
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'Location',
      from: '1NIVOZxrr-uoXhpWSQH2YJzY5aWhkRZW0bWhfZw'
    },
    map: map
  });

  // Create the legend and display on the map
  var legend = document.createElement('div');
  legend.id = 'legend';
  var content = [];
  content.push('<h3>Butterflies*</h3>');
  content.push('<p><div class="color red"></div>Battus</p>');
  content.push('<p><div class="color yellow"></div>Speyeria</p>');
  content.push('<p><div class="color green"></div>Papilio</p>');
  content.push('<p><div class="color blue"></div>Limenitis</p>');
  content.push('<p><div class="color purple"></div>Myscelia</p>');
  content.push('<p>*Data is fictional</p>');
  legend.innerHTML = content.join('');
  legend.index = 1;
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

}

function showHide(id, btn) {
  var el = document.getElementById(id);
  var btns = document.getElementsByName(btn.name);
  for (var i = 0; i < btns.length; i++) {
    if (btns[i].checked && btns[i].value == "ON")
      el.style.display = 'block';
    if (btns[i].checked && btns[i].value == "OFF")
      el.style.display = 'none';
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#legend {
  background: #FFF;
  padding: 10px;
  margin: 5px;
  font-size: 12px;
  font-family: Arial, sans-serif;
}
.color {
  border: 1px solid;
  height: 12px;
  width: 12px;
  margin-right: 3px;
  float: left;
}
.red {
  background: #C00;
}
.yellow {
  background: #FF3;
}
.green {
  background: #6F0;
}
.blue {
  background: #06C;
}
.purple {
  background: #63C;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
showLegend
<label class='radio inline'>ON</label>
<input type='radio' name='types' id='rbPolygon2' value="ON" checked="checked" onchange="showHide('legend', this);" />
<label class='radio inline'>OFF</label>
<input type='radio' name='types' id='rbPolygon2' value="OFF" onchange="showHide('legend', this);" />
<div id="map-canvas"></div>

【讨论】：