Запрос Google Fusion Tables: Выбрать все опции

Я застрял с последним штрихом на моей карте Fusion Tables. Как мне изменить свой код, чтобы я мог получить опцию «Выбрать все» в моем запросе?Запрос Google Fusion Tables: Выбрать все опции

Я нашел этот кусок кода ...

https://developers.google.com/fusiontables/docs/samples/change_query

И положил его в свой код. Но что я делаю неправильно?

<!DOCTYPE html> 
<html> 
    <head> 
<title>Aarbevingen 1900-2012 (+1000 dodelijke slachtoffers)</title> 
    <style> 
    #map-canvas { width:1000px; height:600px; } 
    </style> 
    <script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript"> 
    var map; 
    var layer; 
    var layerl1; 
    var layerl2; 
    var layerl3; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map-canvas'), { 
     center: new google.maps.LatLng(0, 20), 
     zoom: 2 
     }); 
     var style = [ 
     { 
      featureType: 'all', 
      elementType: 'all', 
      stylers: [ 
      { saturation: -99 } 
      ] 
     } 
     ]; 
     var styledMapType = new google.maps.StyledMapType(style, { 
     map: map, 
     name: 'Styled Map' 
     }); 
     map.mapTypes.set('map-style', styledMapType); 
     map.setMapTypeId('map-style'); 

     layer = new google.maps.FusionTablesLayer({ 
     query: { 
      select: "'Locatie'", 
      from: 3555344 
     }, 
     map: map 
     }); 

     layer11 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: "'geometry'", 
      from: 3556478 
     }, 
     clickable: false, 
     map: map 
     }); 

     layer12 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: "'geometry'", 
      from: 3556541 
     }, 
     clickable: false, 
     map: map 
     }); 

     layer13 = new google.maps.FusionTablesLayer({ 
     query: { 
      select: "'geometry'", 
      from: 3556712 
     }, 
     clickable: false, 
     map: map 
     }); 

     google.maps.event.addDomListener(document.getElementById('search-string-10'), 
      'change', function() { 
       updateMap(layer); 
     }); 

var legendDiv = document.createElement('DIV'); 
    var legend = new Legend(legendDiv, map); 
    legendDiv.index = 1; 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legendDiv);  

    } 

    function changeMap10(layer) { 
     var searchString = document.getElementById('search-string-10').value; 
     if (searchString) { 
      layer.setOptions({ 
      query: { 
       select: "'Locatie'", 
       from: 3555344, 
       where: "search-string-10 = '" + searchString + "'" 
      } 
      }); 
     } else { 
      layer.setOptions({ 
      query: { 
       select: "'Locatie'", 
       from: 3555344 
      } 
      }); 
     } 
     } 

function Legend(controlDiv, map) { 
    // Set CSS styles for the DIV containing the control 
    // Setting padding to 5 px will offset the control 
    // from the edge of the map 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control border 
    var controlUI = document.createElement('DIV'); 
    controlUI.style.backgroundColor = 'white'; 
    controlUI.style.borderStyle = 'solid'; 
    controlUI.style.borderWidth = '1px'; 
    controlUI.title = 'Legend'; 
    controlDiv.appendChild(controlUI); 

    // Set CSS for the control text 
    var controlText = document.createElement('DIV'); 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
    controlText.style.fontSize = '11px'; 
    controlText.style.paddingLeft = '4px'; 
    controlText.style.paddingRight = '4px'; 

    // Add the text 
    controlText.innerHTML = '<b>Legenda</b><br />' + 
    '<div style="background-color: #ff0000; height: 10px; width: 10px; margin: 2px; float: left;"></div>> 100.000 doden<br />' + 
    '<div style="background-color: #ffff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>10.000-100.000 doden<br />'+ 
    '<div style="background-color: #00ff00; height: 10px; width: 10px; margin: 2px; float: left;"></div>1.000-10.000 doden<br />'; 
    controlUI.appendChild(controlText); 
}  

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


    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <div style="margin-top: 10px;"> 
     <label>Dodental</label> 
     <select id="search-string-10"> 
     <option value="">--Selecteer--</option> 
     <option value="1.000-10.000">1.000-10.000</option> 
     <option value="10.000-100.000">10.000-100.000</option> 
     <option value="> 100.000">> 100.000</option> 
     </select> 
    </div> 
    </body> 
</html>

источник

2012-04-17 Jerry Vermanen

Я положил свой код в jsFiddle, с моим незначительным улучшением: http://jsfiddle.net/odi86/hqm5k/

Прежде всего, вы должны вернуть используемые значения из вашего списке выбора, поэтому я изменил, что:

<select id="search-string-10"> 
    <option value="">All</option> 
    <option value="1000">1.000-10.000</option> 
    <option value="10000">10.000-100.000</option> 
    <option value="100000"> 100.000</option> 
</select>

Чтобы все было ясно, я добавил новую запись для «всех» записей, но она в основном такая же, как первая, не возвращающая значения.

И тогда вы можете использовать это значение в запросе:

EDIT: Я изменил эту функцию, чтобы установить, когда условие в пустую строку, если специальная опция не выбрана

function changeMap10(layer) { 
    var searchString = document.getElementById('search-string-10').value; 
    var whereCondition = ''; 
    if (searchString) { 
     whereCondition = "zoekveld = '" + searchString + "'"; 
    } 
    layer.setOptions({ 
     query: { 
      select: "'Locatie'", 
      from: 3555344, 
      where: whereCondition 
     } 
    }); 
}

В если/else не требуется, вы можете использовать тот же запрос со значением по умолчанию.

Наконец я изменил слушатель событий для вызова вашей changeMap10() функции вместо updateMap() функции из примера:

google.maps.event.addDomListener(document.getElementById('search-string-10'), 
    'change', function() { 
     changeMap10(layer); 
});

источник

2012-04-17 12:45:29 Odi

Мне пришлось внести некоторые изменения в ваш скрипт, потому что он должен искать в другом столбце имена «zoekveld». Здесь у меня есть три категории, называемые 1, 2 и 3. И я изменил строку поиска на: «zoekveld =» + searchString ,. Но, тем не менее, я не получаю параметр «Все», когда я оставляю значение пустым. Проверьте код на [http://jsfiddle.net/hqm5k/8/]. –

Хорошо, я вижу. Я изменил функцию changeMap10() 'выше, или вы можете проверить новую версию здесь: http://jsfiddle.net/odi86/hqm5k/10/ – Odi

Odi правильно. Есть еще несколько примеров на этом ответ: https://stackoverflow.com/a/9401345/1211981 Кроме того, чтобы получить все записи, которые вы можете использовать пустой, где пункт:

where: ""

Кроме того, цифры не должны требовать кавычек, так что, где, вероятно, должно быть:

where: "Dodental > " + searchString,

источник

2012-04-17 13:16:52

Запрос Google Fusion Tables: Выбрать все опции

ответ

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