Javascript 使用单选按钮在谷歌地图上切换自定义图例
我使用下面的代码为google地图创建了一个图例 但是，我想包括两个单选按钮，如果选中第一个单选按钮，图例应该出现，如果选中第二个单选按钮，图例应该消失 我试着找了又找，但没能成功。感谢您的帮助 编辑：多亏了geocodezip，我才得以成功。请从以下位置检查修改的showHide功能： 传奇 在…上 关Javascript 使用单选按钮在谷歌地图上切换自定义图例,javascript,html,google-maps,google-maps-api-3,google-fusion-tables,Javascript,Html,Google Maps,Google Maps Api 3,Google Fusion Tables,我使用下面的代码为google地图创建了一个图例 但是，我想包括两个单选按钮，如果选中第一个单选按钮，图例应该出现，如果选中第二个单选按钮，图例应该消失 我试着找了又找，但没能成功。感谢您的帮助 编辑：多亏了geocodezip，我才得以成功。请从以下位置检查修改的showHide功能： 传奇 在…上 关 可能重复您所说的单选按钮，您是指复选框吗？喜欢吗？谢谢你的帮助，它带有一个复选框，但我的意思是type='radio'。所以从技术上讲，我需要两个，一个是开的，另一个是关的。请更新你的问题，使
可能重复您所说的单选按钮，您是指复选框吗？喜欢吗？谢谢你的帮助，它带有一个复选框，但我的意思是type='radio'。所以从技术上讲，我需要两个，一个是开的，另一个是关的。请更新你的问题，使其更具体，并展示你的尝试。好的，我设法让它工作。我使用了两个函数和两个按钮函数showHideid{var el=document.getElementByIdid；el.style.display='block'；}函数Hideid{var el=document.getElementByIdid；el.style.display='none'；}我不知道是否还有其他方法可以做到这一点。再次感谢
<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>
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);" />