0

我試圖顯示一個過境路線圖,允許用戶點擊複選框按方向過濾。我不斷收到「數據可能仍在加載..」錯誤,似乎沒有解決刷新/縮放/等。谷歌地圖和融合表與多個圖層的

有兩層(一個有路線,另一個有停靠點)引用兩個谷歌融合表。相同的方向濾波器饋入兩個表的查詢(即,用於停止和路由的NB濾波器)

我試過只顯示一層(通過註釋掉其他),並且兩者似乎都能正常工作。另外,停止數據表有大約600個條目,所以我不認爲這是一個限制問題?

這是在<head>

<script type="text/javascript"> 
    function initialize() { 

    // Change these variables for each route 
    var routeNumber = '257';    // Route number as string 
    var mapLatitude = 37.9985;    // Center of map latitude 
    var mapLongitude = -122.5372;   // Center of map longitude 
    var zoomLevel = 13;      // Map zoom level 

    // Map display options 
    var myOptions = { 
     center: new google.maps.LatLng(mapLatitude, mapLongitude), 
     zoom: zoomLevel, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    // Create map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    // Create fusion table layers 
    var stopLayer = new google.maps.FusionTablesLayer(); 
    var routeLayer = new google.maps.FusionTablesLayer(); 
    filterMap(routeLayer, stopLayer, map, routeNumber); 

    // Call filter function on click action 
    google.maps.event.addDomListener(document.getElementById('NB'), 
     'click', function() { 
      filterMap(routeLayer, stopLayer, map, routeNumber); 

    }); 

    google.maps.event.addDomListener(document.getElementById('SB'), 
     'click', function() { 
      filterMap(routeLayer, stopLayer, map, routeNumber); 
    }); 

    // Filter function to create query 
    function filterMap(routeLayer, stopLayer, map, routeNumber) { 
     var where = generateWhere();  

     if (where) { 
      if (!routeLayer.getMap()) { 
       routeLayer.setMap(map); 
      } 
      if (!stopLayer.getMap()) { 
       stopLayer.setMap(map); 
      } 

      routeLayer.setOptions({ 
       query: { 
        select: 'Location', 
        from: '1RG-EcymqePVLwa-7lmmkQVdn0RCW4fjQJFouTsc', 
        where: "'Route Number' LIKE " + routeNumber + " AND " + where 
       } 
      }); 

      stopLayer.setOptions({ 
       query: { 
        select: 'latitude', 
        from: '1GTjjCaqkYTM3IDhrt2x8pWO73wCu7KTM1bbEcG8', 
        where: "'Marin Transit Routes' LIKE '%" + routeNumber + "%' AND " + where 
       } 
      }); 

     } else { 
      stopLayer.setMap(null); 
     } 
    } 

    // Generates string of checked options to feed into query 
    function generateWhere() { 
     var filter = []; 
     var directions = document.getElementsByName('direction'); 
     for (var i = 0, direction; direction = directions[i]; i++) { 
      if (direction.checked) { 
       var directionName = direction.value.replace(/'/g, '\\\''); 
       filter.push("'" + directionName + "'"); 
      } 
     } 
     var where = ''; 
     if (filter.length) { 
      where = "'Direction' IN (" + filter.join(',') + ')'; 
     } 
     return where; 
    } 

} 
</script> 

這個代碼在<body>

<div> 
    <input type="checkbox" checked="checked" name="direction" id="NB" value="NB" /><label>NB</label> 
    <input type="checkbox" checked="checked" name="direction" id="SB" value="SB" /><label>SB</label> 
</div> 


UPDATE

確定的代碼,所以我嘗試切換在第二天繞回來,它工作!但是在對代碼和/或融合表數據進行一些編輯之後,我遇到了一些類似的問題,其中一些停止/造型沒有渲染。大約一個小時左右,造型開始出現了一些觀點。(站應該都是或大或小的綠色圖標)

map screenshot

也許是與清爽的瓷磚的問題嗎?因爲正確顯示的站點看起來像是全部在一個地圖塊中,並且在我縮放時會發生變化。有沒有人遇到過這個?如果是這樣,有什麼辦法來強制刷新或防止這種情況發生?

代碼在這裏:http://jsfiddle.net/mobilemelody/u9vhD/4/

+0

我把你的代碼放在jsFiddle上:http://jsfiddle.net/odi86/tzswC/。那麼究竟有什麼不工作?我無法重現錯誤。是否有可能將樣式規則添加到兩個圖層?因爲FT只允許一個圖層應用樣式。 – Odi 2012-07-27 17:55:05

+0

感謝您的回覆。當我測試該鏈接時,我仍然收到錯誤。另外,我還沒有添加任何樣式。然而,我想我想出了它(或者至少是一個解決方法)。出於某種原因,當我切換它的工作層的順序。 – Melody 2012-07-27 21:21:42

回答

0

我覺得我想出了一個變通的現在。出於某種原因,當我切換圖層的順序時,它可以工作。

這是腳本的更新部分

// Filter function to create query 
    function filterMap(routeLayer, stopLayer, map, routeNumber) { 
     var where = generateWhere(); 

     if (where) { 
      if (!stopLayer.getMap()) { 
       stopLayer.setMap(map); 
      } 
      if (!routeLayer.getMap()) { 
       routeLayer.setMap(map); 
      } 

      stopLayer.setOptions({ 
       query: { 
        select: 'latitude', 
        from: '1GTjjCaqkYTM3IDhrt2x8pWO73wCu7KTM1bbEcG8', 
        where: "'Marin Transit Routes' LIKE '%" + routeNumber + "%' AND " + where 
       } 
      }); 

      routeLayer.setOptions({ 
       query: { 
        select: 'Location', 
        from: '1RG-EcymqePVLwa-7lmmkQVdn0RCW4fjQJFouTsc', 
        where: "'Route Number' LIKE " + routeNumber + " AND " + where 
       }, 
       suppressInfoWindows: true 
      }); 

     } else { 
      stopLayer.setMap(null); 
      routeLayer.setMap(null); 
     } 
    } 

然而,在這種方式下單,該路由線最終被在車站的頂部,使得它有點棘手點擊解數,彈出信息窗口..如果有人有更好的解決方案,它將不勝感激