Question

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) { ...

提前感谢您的帮助...

Answer 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'函数来附加事件。

Answer 2

我找到了Google的一个很好的例子来回答我原来的问题。以下示例显示了用于更新Fusion Table图层查询的单击事件：

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

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

2 个答案: