Google 퓨전 테이블과 함께 사용하면 JQuery 슬라이더가 움직이지 않습니다.

Question

JQuery 슬라이더 및 Google 퓨전 테이블과 관련하여 약간의 문제가 있습니다. 이것은 Google지도 응용 프로그램입니다. 퓨전 테이블에 여러 위치가 저장되어 있으며지도 초기화 중에지도에 표시됩니다. 물론 흥미로운 것은 아니기 때문에 JQuery 슬라이더를 추가하여 이벤트 콜백 함수를 설정하여 사용자가 슬라이더와 상호 작용할 때지도에 표시된 위치가 동적으로 바뀔 수 있습니다. 그러나 슬라이더는 다음 코드 조각으로도 움직이지 않습니다. 매우 간단해야합니다.

지도와 슬라이더를 모두 초기화했습니다. 슬라이더의 콜백 함수에는 두 줄이 있는데 첫 번째는 슬라이더의 현재 값을 0에서 100까지 표시하고 두 번째는 융합 표를 다시 쿼리하여 업데이트 된 데이터를 반영합니다 (여기서 간단히 쿼리를 단순화했습니다. 모든 항목을 선택하고 다시 전송하므로지도에 표시된 데이터는 슬라이더와 상호 작용해도 변경되지 않습니다.

크롬에서 내가 얻은 것은 모든 데이터 포인트가 표시된 상태에서지도가 초기화 된 것입니다. 그러나 슬라이더를 움직이려고했을 때 슬라이더가 그대로 유지되지만 슬라이더의 값 (줄 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

, layer는 전역 범위에 있어야합니다 : 아래

는 코드입니다. layer.setOptions() 구문을 사용할 때 이해하고 읽는 것이 더 쉽다고 생각하기 때문에 약간 코드가 변경되지만, 이는 단지 맛의 문제 일뿐입니다. 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 
       } 
      }); 
     } 
    }); 
});​