Question

我对JQuery Slider和Google Fusion Table有一点问题。这是Google Map应用程序。我有几个位置存储在Fusion Table中，它们将在地图初始化期间显示在地图上。当然，这不是那么有趣，所以我想添加一个JQuery Slider，以便当用户与滑块交互时，通过设置事件回调函数，地图上出现的位置可以动态地改变。但是，即使使用下面的代码，滑块也不会移动，这应该非常简单。

我所做的就是初始化地图和滑块。滑块的回调函数有两行，第一行在网页上显示滑块的当前值，范围从0到100;第二行再次查询融合表以反映更新的数据（这里我简化了查询，所以它只是选择所有条目并将它们发回，因此即使一个条目与滑块相互作用，地图上显示的数据也不会改变。

在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
        }
    });
  });

Answer 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
                }
            });
        }
    });
});

与Google Fusion Table一起使用时，JQuery滑块不会移动

1 个答案: