1

JQuery Slider と Google Fusion Table に関して少し問題があります。これは Google マップ アプリケーションです。フュージョン テーブルにいくつかの場所が保存されており、マップの初期化中にマップに表示されます。もちろん、これはそれほど興味深いものではないので、イベント コールバック関数を設定することで、ユーザーがスライダーを操作したときにマップに表示される場所が動的に変化するように、JQuery スライダーを追加したいと考えています。ただし、非常に単純な次のコードを使用しても、スライダーは移動しません。

私がしたことは、マップとスライダーを初期化することだけです。スライダーのコールバック関数には 2 つの行があります。最初の行は Web ページにスライダーの現在の値を 0 から 100 の範囲で表示します。2 番目の行は更新されたデータを反映するためにフュージョン テーブルに再度クエリを実行します (ここではクエリを単純化したので、すべてのエントリを選択して送り返すだけなので、スライダーを操作してもマップに表示されるデータは変更されません)。

Chrome では、マップが正常に初期化され、すべてのデータ ポイントが表示されます。ただし、スライダーを動かそうとすると、そこにとどまりますが、スライダーの値 (1 行目が示すもの) は変わります。ただし、2行目をコメントアウトすると、すべて問題なく、クエリを送信しなくても、スライダーは自由に移動できます...

マップ、フュージョン テーブル、JQuery スライダーを同時に使用した経験のある人はいますか? どんな提案でも大歓迎です。

以下はコードです：

  // initialize map
  function initialize() {
      var place = new google.maps.LatLng(30, -120);

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: place,
        zoom: 4,
        mapTypeId: 'terrain'
      });

      var layer = new google.maps.FusionTablesLayer('132848');
      layer.setMap(map);
  }

  // define the JQuery Slider
  $(function(){
    $('#slider').slider({
        max: 100,
        min: 0,
        step: 1,
        value: 0,
        slide: function(event, ui) {
            document.getElementById("slider-value").innerHTML = ui.value + " mi";// line 1
            layer.setQuery('select Location from 132848');// line 2
        }
    });
  });
4

1 に答える 1

1

Eric が既に指摘したlayerように、スライダーがアクセスできるように、グローバル スコープ内にある必要があります。layer.setOptions()構文を使用すると理解しやすく読みやすいと思うので、コードを少し変更しますが、それは好みの問題です。フィールドにスライダーフィルターを使用しましたdistance。好きなものに変更してください:-)

これが私の適応コードのデモです: http://jsfiddle.net/odi86/kb4TV/

var layer;
var tableId = '132848';
var map;

// initialize map
function initialize() {
    var place = new google.maps.LatLng(30, -120);
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: place,
        zoom: 4,
        mapTypeId: 'terrain'
    });

    layer = new google.maps.FusionTablesLayer({
        query: {
            select: "Location",
            from: tableId
        },
        map: map
    });
}

// define the JQuery Slider
$(function() {
    $('#slider').slider({
        max: 100,
        min: 0,
        step: 1,
        value: 0,
        slide: function(event, ui) {
            document.getElementById("slider-value").innerHTML = ui.value + " mi";
            layer.setOptions({
                query: {
                    select: "Location",
                    from: tableId,
                    where: "distance <= " +  ui.value
                }
            });
        }
    });
});​
于 2012-05-26T18:18:15.390 に答える