1

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

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

在 Chrome 中，我得到的是地图初始化成功，显示了所有数据点。但是，当我尝试移动滑块时，它只是停留在那里，但滑块的值（第 1 行显示的内容）确实发生了变化。但是，如果我注释掉第 2 行，一切都很好，滑块可以自由移动，虽然不发送任何查询...

有没有人有同时使用 Maps、fusion table 和 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 回答