如何使用 Fusion Layer 为我的下拉菜单选择范围？

Question

我有一个 Google Fusion 图层，我想根据我在下拉菜单中的选择突出显示其上的区域。

我试图显示与他们每年报告的犯罪率相关的区域，因此我有一个如下所示的下拉菜单：

select id="filterOnValue" onchange="highlightArea(this.value);">
<option value="--Select--">--Select--</option>
<option value="50">Very Low</option>
<option value="100">Low</option>
<option value="200">Medium</option>
<option value="500">High</option>
<option value="1807">Very High</option>
</select>

我的融合层查询如下所示：

function highlightArea() {
var whereClause;
var searchCrime = document.getElementById('filterOnValue').value.replace(/'/g, "\\'");

// Highlight the map if a selection from the crime dropdown filter is chosen      
if (searchCrime != '--Select--') {
    whereClause = "'Reported Crimes' <= '" + searchCrime + "'";

    layer.setOptions({
        query: {
            select: "col40>>0",
            from: "1S0FCMn-wGr2zy6SrAnre6HNF_KghfZmObb4sNLc",
            where: whereClause
        }

    });

  }
}

由于我的查询中的

这是我的代码的一个 jsfiddle（地图由于某种原因未在此处加载）：http://jsfiddle.net/QxJ9R/4/

我将如何更改我的查询以反映我想要它做什么？

Answer 1

要创建范围，您需要这样的 where 子句：

'Reported Crimes' >= 100 AND 'Reported Crimes' < 200

这将为您提供'Reported Crimes' 大于或等于 100 但同时小于 200 => 范围 100-200 的所有记录。

我forked your jsFiddle to show you a possible solution。我移动了 JavaScript 代码中的所有范围以防止逻辑重复（因此我将选择中的数字替换为 low 或 high 之类的标识符）：

HTML：

<div id="map-canvas" style="height: 400px; width: 400px;"></div>
<label>Yearly Reported Crimes</label>
<select id="filterOnValue" onchange="highlightArea(this.value);">
    <option value="--Select--">--Select--</option>
    <option value="vlow">Very Low</option>
    <option value="low">Low</option>
    <option value="med">Medium</option>
    <option value="high">High</option>
    <option value="vhigh">Very High</option>
</select>

JavaScript：

function highlightArea() {
    var whereClause;
    var searchCrime = document.getElementById('filterOnValue').value.replace(/'/g, "\\'");

   var whereRanges = {
        'vlow': "'Reported Crimes' <= '" + 50 + "'",
        'low': "'Reported Crimes' >= '" + 50 + "' AND 'Reported Crimes' < '" + 100 + "'",
        'med': "'Reported Crimes' >= '" + 100 + "' AND 'Reported Crimes' < '" + 200 + "'",
        'high': "'Reported Crimes' >= '" + 200 + "' AND 'Reported Crimes' < '" + 500 + "'",
        'vhigh': "'Reported Crimes' >= '" + 500 + "'"
   };

    // Highlight the map if a selection from the crime dropdown filter is chosen      
    if (searchCrime != '--Select--') {
        whereClause = whereRanges[searchCrime];

        layer.setOptions({
            query: {
                select: "col40>>0",
                from: "1S0FCMn-wGr2zy6SrAnre6HNF_KghfZmObb4sNLc",
                where: whereClause
            }

        });

    }
}