如何根据用户输入和按钮更改 Fusion Table 图层查询？答案

【问题标题】：How to change a Fusion Table layer query based on user input and button?如何根据用户输入和按钮更改 Fusion Table 图层查询？
【发布时间】：2013-09-07 10:29:30
【问题描述】：

Google 在此处提供了一个在地图上更新 Fusion Table 图层的绝佳示例：https://developers.google.com/fusiontables/docs/samples/change_query

用户输入在 HTML 中是这样捕获的：

    <select id="delivery">
      <option value="">--Select--</option>
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>

然后在 javascript 中像这样更新查询：

function updateMap(layer, tableId, locationColumn) {
    var delivery = document.getElementById('delivery').value;
    if (delivery) {
      layer.setOptions({
        query: {
          select: locationColumn,
          from: tableId,
          where: "delivery = '" + delivery + "'"
        }
      });
    } else {
      layer.setOptions({
        query: {
          select: locationColumn,
          from: tableId
        }
      });
    }

正如您在上面的链接中看到的，查询和地图图层会在更改时立即更新。我不想在更改时立即更新，而是让用户在交付字段中选择一个值，然后在按钮单击时更新查询：

<input type="button" id="button" value="Update Map">

谁能给我一个例子或者修改updateMap函数使用按钮点击提示更改？

我尝试了类似的方法，但没有成功：

var delivery = document.getElementById('button').click();
    if (delivery) { ...

提前感谢您的帮助...

【问题讨论】：

这里是an example that geocodes an address on a button click then does a query based on the result、another、another

标签： javascript html sql google-maps-api-3 google-fusion-tables

【解决方案1】：

地图会立即更新，因为示例中存在与 select 元素关联的事件：

google.maps.event.addDomListener(document.getElementById('delivery'),
        'change', function() {
          updateMap(layer, tableId, locationColumn);
    });

上面的代码将事件关联 - 在所选值的“更改”上，执行“updatemap”。

您需要删除此事件并将事件与您的按钮“点击”相关联。

例子：

google.maps.event.addDomListener(document.getElementById('<Your Button ID>'),
            'click', function() {
              updateMap(layer, tableId, locationColumn);
        });

话虽如此，您附加事件的技术是不正确的。如果您使用的是 Javascript，则需要附加事件并添加事件侦听器。如果你使用 jQuery，你可以使用 'bind'/'on' 函数来附加事件。

【讨论】：

.addDomListener 不是我的事件监听器吗？不应该监听来自 HTML 按钮的按钮单击，就像在监听字段更改的示例中一样？我不确定还有什么要添加的javascript？仅供参考，我没有使用 jQuery。谢谢！
是的，它是你的事件监听器；但是，您需要关联到要收听的元素。您需要将事件侦听器与您的按钮相关联，如我在上述答案中给出的示例 - .
您在下面的回答正是我告诉您的 - 向按钮添加一个事件。在 Google 的示例中，按钮是“go”，在我提供的代码中，它是

【解决方案2】：

我从 Google 找到了一个很好的例子，它回答了我最初的问题。这是一个显示更新 Fusion Table 图层查询的单击事件的示例：

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

【讨论】：