與Google Fusion一起使用時，JQuery滑塊不移動表

對於JQuery Slider和Google Fusion表，我有一個小問題。這是一個Google Map應用程序。我有幾個位置存儲在Fusion Table中，它們將在地圖初始化期間顯示在地圖上。當然，這並不是那麼有趣，所以我想添加一個JQuery Slider，以便當用戶與滑塊交互時，通過設置事件回調函數，地圖上出現的位置可以動態更改。但是，即使使用下面的一段代碼，滑塊也不會移動，這應該非常簡單。與Google Fusion一起使用時，JQuery滑塊不移動表

我所做的只是初始化地圖和滑塊。滑塊的回調函數中有兩行，第一行顯示網頁上滑塊的當前值，範圍從0到100;第二行再次查詢融合表以反映更新的數據（這裏我簡化了查詢它只是選擇所有條目並將它們發回，因此即使與滑塊交互，地圖上顯示的數據也不會改變）。

在Chrome中，我得到的是地圖初始化成功，並顯示所有數據點。但是，當我嘗試移動滑塊時，它只停留在那裏，但滑塊的值（第1行顯示）確實會改變。但是，如果我註釋掉第2行，一切都很好，滑塊可以自由移動，儘管不會發送任何查詢...

有沒有人有關於同時使用Maps，融合表和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 
     } 
    }); 
    });

來源

2012-05-21 user1407028

沒有與jQuery.slider經驗，但我會嘗試使您的圖層成爲全球第一。滑塊功能無法訪問layer.setQuery（） –

正如埃裏克已經指出，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-26 18:18:15 Odi

與Google Fusion一起使用時，JQuery滑塊不移動表

回答

相關問題