0

Google は、マップ上のフュージョン テーブル レイヤーを更新する優れた例を提供しています: 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) { ...

助けてくれてありがとう...

4

2 に答える 2

0

サンプルの 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' 関数を使用してイベントを添付できます。

于 2013-09-04T05:05:55.677 に答える