Fusion Table Google Maps Второе выпадающее меню Javascript не работает - PullRequest
Новая
       26

Fusion Table Google Maps Второе выпадающее меню Javascript не работает

0 голосов
/ 14 июля 2011

В данный момент я создаю карту, которая будет иметь меню javascript, позволяющее пользователям переходить на другие виды карты, используя наложения таблиц Google Fusion.Мое первое выпадающее меню работает как шарм.Однако второе выпадающее меню не будет работать с другим.Я хотел бы, чтобы эти двое работали вместе.Например, кто-то может выбрать «Животные» и «Возможности», и он покажет местоположения с данными ячейки «Животные» и «Возможности».

Это моя HTML-страница Google Maps: 

        <html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<!DOCTYPE html>
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 500px; width:600px; }
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var tableid = 567682;
    var layer = new google.maps.FusionTablesLayer(567682); 

  function initialize() {
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
          layer.setMap(map);
  }
    //Change the query based on the user's selection
function interestMap(interest) {
 layer.setQuery("SELECT Address, 'Interest Area' FROM " + tableid + " WHERE 'Interest Area' CONTAINS '" + interest + "'"); 
}
function statusMap(status) {
 layer.setQuery("SELECT Address, 'Status' FROM " + tableid + " WHERE 'Status' CONTAINS '" + status + "'"); 
}
</script>

 </script> 

</head> 
<body onload="initialize();">  
  Internship Status <select onchange="interestMap(this.value);"> 
    <option value="">Interest Areas</option>
<option value="Aerospace">Aerospace</option>
<option value="Animals">Animals</option>
<option value="Architecture">Architecture</option>
<option value="Art/Music/Theatre">Art/Music/Theatre</option>
<option value="Athletics and Martial Arts">Athletics</option>
<option value="Automotive and Transportation">Automotive</option>
<option value="Bicycles">Bicycles</option>
<option value="Business">Business</option>
<option value="Community Development">Community Development</option>
<option value="Computers">Computers</option>
<option value="Cosmetology">Cosmetology</option>
<option value="Culinary">Culinary</option>
<option value="Education">Education</option>
<option value="Government and Politics">Politics</option>
<option value="Health Science">Health Science</option>
<option value="Hospitality/Tourism/Event Planning">Event Planning</option>
<option value="Law and Public Safety">Law and Public Safety</option>
<option value="Marketing">Marketing</option>
<option value="Media and Information Technology">Media</option>
<option value="Photography">Photography</option>
<option value="Science and Technology">Science and Technology
</option>
<option value="Social Services">Social Services</option>
  </select>
   Status <select onchange="statusMap(this.value);"> 
    <option value="">Status</option>
<option value="BEING PURSUED">Being Pursued</option>
<option value="HAS INTERN">Has Intern</option>
<option value="NOT TAKING">Not Taking</option>
<option value="OPPORTUNITY">Opportunity</option>
<option value="OVER 18">Over 18</option>
<option value="POTENTIAL?">Potential</option>
<option value="SEE NOTES">See Notes</option>


  </select>
  <div id="map_canvas"></div>

</body> 
</html>

Вот это: Fusion Table

Вот это: Live Code

Вся помощь очень ценится!Спасибо.

1 Ответ

0 голосов
/ 14 июля 2011

Вот решение - протестировано в Chrome;) - обратите внимание на новую кнопку, метод refreshFusion и атрибуты id на двух выбранных элементах. 

<!DOCTYPE html>
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Met Sacramento Internship Map</title> 

<!-- Style --> 
<style> 
  body { font-family: Arial, sans-serif; }
  #map_canvas { height: 500px; width:600px; }
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var tableid = 567682;
    var layer = new google.maps.FusionTablesLayer(567682); 

  function initialize() {
    var latlng = new google.maps.LatLng(38.59970036588819, -121.541748046875);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
          layer.setMap(map);
  }

    function refreshFusion() {
        var qry = "SELECT Address, 'Status' FROM " + tableid;
        var interest = document.getElementById('ddlInterest').value;
        var status = document.getElementById('ddlStatus').value;
        var filters = [];
        if(interest != '') {
            filters.push("'Interest Area' CONTAINS '" + interest + "'");
        }
        if(status != '') {
            filters.push("'Status' CONTAINS '" + status + "'");
        }
        if(filters.length > 0) {
            qry += " WHERE " + filters.join(" AND ");
        }
        layer.setQuery(qry);
    }
</script>

 </script> 

</head> 
<body onload="initialize();">  
  <p>Internship Status <select id="ddlInterest"> 
    <option value="">Interest Areas</option>
<option value="Aerospace">Aerospace</option>
<option value="Animals">Animals</option>
<option value="Architecture">Architecture</option>
<option value="Art/Music/Theatre">Art/Music/Theatre</option>
<option value="Athletics and Martial Arts">Athletics</option>
<option value="Automotive and Transportation">Automotive</option>
<option value="Bicycles">Bicycles</option>
<option value="Business">Business</option>
<option value="Community Development">Community Development</option>
<option value="Computers">Computers</option>
<option value="Cosmetology">Cosmetology</option>
<option value="Culinary">Culinary</option>
<option value="Education">Education</option>
<option value="Government and Politics">Politics</option>
<option value="Health Science">Health Science</option>
<option value="Hospitality/Tourism/Event Planning">Event Planning</option>
<option value="Law and Public Safety">Law and Public Safety</option>
<option value="Marketing">Marketing</option>
<option value="Media and Information Technology">Media</option>
<option value="Photography">Photography</option>
<option value="Science and Technology">Science and Technology
</option>
<option value="Social Services">Social Services</option>
  </select>
   Status <select id="ddlStatus"> 
    <option value="">Status</option>
<option value="BEING PURSUED">Being Pursued</option>
<option value="HAS INTERN">Has Intern</option>
<option value="NOT TAKING">Not Taking</option>
<option value="OPPORTUNITY">Opportunity</option>
<option value="OVER 18">Over 18</option>
<option value="POTENTIAL?">Potential</option>
<option value="SEE NOTES">See Notes</option>


  </select> <input type="button" value="Run Query" onclick="refreshFusion();" /></p>
  <div id="map_canvas"></div>

</body> 
</html>
...