Переключить на заказ Легенда на картах Google, используя переключатель

-1

Я создал легенду карты Google, используя следующий код из Google Developers Website Переключить на заказ Легенда на картах Google, используя переключатель

<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

источник

2015-06-05 wollyka

Возможный дубликат [Отправляясь дисплей Simple: нет/блок с JavaScript] (http://stackoverflow.com/questions/20423322/simple-setting-off-display-none-block- с-javascript) – geocodezip

Где вы говорите «радиокнопка», вы имеете в виду флажок? Как [это] (http://jsfiddle.net/geocodezip/p0sef8n3/)? – geocodezip

Спасибо за вашу помощь, он работает с флажком, но я имел в виду: type = 'radio' , Поэтому технически мне нужны два из них для ON, а другой для OFF. – wollyka

Модифицированный showHide функцию от this question (Simple setting off display: none/block with javascript):

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

фрагмент кода:

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"></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>

источник

2015-06-06 00:35:48 geocodezip

Переключить на заказ Легенда на картах Google, используя переключатель

ответ

Смежные вопросы