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>

为了清楚起见，我为“所有”记录添加了一个新条目，但它基本上与第一个没有返回值的条目相同。

然后你就可以在查询中使用这个值：

编辑：如果没有特定的选项被选中

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 
     } 
    }); 
}

的我改变了这种功能WHERE条件设置为空字符串如果/ 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.我将搜索字符串更改为where：“zoekveld =”+ searchString ,.但是，当我将该值留空时，我还没有得到全部选项。检查[http://jsfiddle.net/hqm5k/8/]上的代码。 – 2012-04-18 11:58:17

好吧，我明白了。我改变了上面的'changeMap10（）'函数，或者你可以在这里检查新版本：http://jsfiddle.net/odi86/hqm5k/10/ – Odi 2012-04-18 13:02:30

ODI是正确的。有一些更多的例子，在这样的回答：https://stackoverflow.com/a/9401345/1211981 此外，为了让你可以使用一个空的where子句中的记录：

where: ""

此外，数字不应该需要引号所以这里也许应该是：

where: "Dodental > " + searchString,

来源

2012-04-17 13:16:52

Google Fusion Tables查询：全选选项

回答

相关问题