2012-06-02 65 views
1

我已经写了一个Google Fusion Tables脚本,我很满意(下面),但它只加载了500行,我的表中有超过20000行。这是我第一次在这附近,我真的很惊讶地发现这个限制。有没有办法加载所有的行?解决500行限制

<!doctype html> 
    <html class="no-js" lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> 
     <title>Points in box</title> 

     <link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" /> 


     <link rel="shortcut icon" href="/images/favicon.ico" /> 
     <noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript> 

      <!-- Find box coordinates javascript --> 
      <script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script> 

      <!-- Type label text javascript -->  
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
      <script type="text/javascript" src="./js/label.js"></script> 

      <!-- Visulization javascript --> 
      <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

      <!-- Initialize visualization --> 
      <script type="text/javascript"> 
       google.load('visualization', '1', {}); 
      </script> 

     </head> 
     <body class="developers examples examples_downloads examples_downloads_points-in-box examples_downloads_points-in-box_index"> 

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     var store_table = 4121905; 

     //send a call to GViz to retrieve lat/long coordinates of the stores 
     function getStoreData() { 
      //set the query using the input from the user 

      var queryText = encodeURIComponent("SELECT Latitude,Longitude,Impressions FROM " + store_table); 
      var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

      //set the callback function 
      query.send(doLoop); 

     } 

     function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) { 

      var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(topleftx, toplefty), 
      new google.maps.LatLng(bottomrightx, bottomrighty) 
     ); 

     var overlay = new google.maps.Rectangle({ 
      map: carto_map, 
      bounds: bounds, 
      strokeColor: "#0000ff", 
      strokeOpacity: 0.20, 
      strokeWeight: 2, 
      fillColor: "#0000ff", 
      fillOpacity: 0.050, 
     }); 
     } 

     function doLoop(response) { 
      numRows = response.getDataTable().getNumberOfRows(); 

     //Basic 
      var cartodbMapOptions = { 
      zoom: 7, 
        center: new google.maps.LatLng(37.926868, -121.68457), 
      // center: new google.maps.LatLng(40.7248057566452, -74.003), 
      // disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      // Init the map 
      carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions); 

      for(i = 0; i < numRows; i++) { 

       var centerX = response.getDataTable().getValue(i,0); 
       var centerY = response.getDataTable().getValue(i,1); 
       var imps = response.getDataTable().getValue(i,2); 

       var centerPoint = new LatLon(centerX,centerY); 
       var latLng = new google.maps.LatLng(centerX,centerY); 

       var toplefty = centerPoint.destinationPoint(-45, 6)._lon; 
       var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat; 

       var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;  
       var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat;  

       drawBox(topleftx, toplefty, bottomrightx, bottomrighty);  

     var marker = new google.maps.Marker({ 
      position: latLng, 
      draggable: false, 
       markertext: imps, 
       flat: true, 
      map: carto_map 
     }); 

      var label = new Label({ 
      map: carto_map, 
       position: latLng, 
       draggable: true 
      }); 
      label.bindTo('text', marker, 'markertext'); 
      marker.setMap(null); 

      } 

     } 

     $(function() { 
         getStoreData(); 
      }); 

      </script> 

       <div id="map"></div> 
     </body> 
    </html> 
+0

对于Google Fusion表格,有表格大小限制。欢迎来到云端。 – starbolin

回答

3

我使用json调用方法解决了这个问题。下面的代码。

 <!DOCTYPE html> 
     <html> 
      <head> 
      <meta charset="UTF-8"> 
      <title>David's Build Up</title> 

      <link href="./stylesheets/example.css" media="screen" rel="stylesheet" type="text/css" /> 


      <link rel="shortcut icon" href="/images/favicon.ico" /> 
      <noscript><meta http-equiv="refresh" content="0;url=/no_javascript.html"></noscript> 

       <!-- Find box coordinates javascript --> 
       <script 
       src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
      </script> 

       <script type ="text/javascript" src="http://www.movable-type.co.uk/scripts/latlon.js"></script> 

       <!-- Type label text javascript -->  
       <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
       <script type="text/javascript" src="./js/label.js"></script> 

       <!-- Visulization javascript --> 
       <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

       <!-- Initialize visualization --> 
       <script type="text/javascript"> 
        google.load('visualization', '1', {}); 
       </script> 


      <script type="text/javascript"> 

        function drawBox(topleftx, toplefty, bottomrightx, bottomrighty) { 

         var bounds = new google.maps.LatLngBounds(
         new google.maps.LatLng(topleftx, toplefty), 
         new google.maps.LatLng(bottomrightx, bottomrighty) 
        ); 

        var overlay = new google.maps.Rectangle({ 
         map: carto_map, 
         bounds: bounds, 
         strokeColor: "#0000ff", 
         strokeOpacity: 0.20, 
         strokeWeight: 2, 
         fillColor: "#0000ff", 
         fillOpacity: 0.050, 
        }); 
        } 

       function initialize() { 

         // Set the map parameters 
         var cartodbMapOptions = { 
          zoom: 5 , 
          center: new google.maps.LatLng(40.313043, -97.822266), 
          mapTypeId: google.maps.MapTypeId.ROADMAP 
         } 
        // Initialize the map 
        carto_map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions); 

         // Query to grab the data 
       var query = "SELECT Latitude, Longitude, Impressions FROM " + 
        '[encrypted table ID here]'; 
       var encodedQuery = encodeURIComponent(query); 

       // Construct the URL to grab the data 
       var url = ['https://www.googleapis.com/fusiontables/v1/query']; 
       url.push('?sql=' + encodedQuery); 
       url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); 
       url.push('&callback=?'); 

         // Set the number of rows 
         var numRows = 3500; 

       // Get the variables from the table, in a loop 
       $.ajax({ 
        url: url.join(''), 
        dataType: 'jsonp', 
        success: function (data) { 
        var rows = data['rows']; 
        var ftData = document.getElementById('ft-data'); 
        for (var i in rows) { 
         var centerX = rows[i][0]; 
         var centerY = rows[i][1]; 
            var imps = rows[i][2]; 
            // Set the center points 
            var centerPoint = new LatLon(centerX,centerY); 
            var latLng = new google.maps.LatLng(centerX,centerY); 
            // Set top left points 
            var toplefty = centerPoint.destinationPoint(-45, 6)._lon; 
            var topleftx = centerPoint.destinationPoint(-45, 7.7)._lat; 
            // Set bottom right points 
            var bottomrighty = centerPoint.destinationPoint(135, 6)._lon;  
            var bottomrightx = centerPoint.destinationPoint(135, 7.7)._lat; 
            // Draw the box 
            drawBox(topleftx, toplefty, bottomrightx, bottomrighty); 
            // Drop markers 
            var marker = new google.maps.Marker({ 
           position: latLng, 
           draggable: false, 
            markertext: imps, 
            flat: true, 
           map: carto_map 
           }); 
           var label = new Label({ 
           map: carto_map, 
            position: latLng, 
            draggable: true 
           }); 
           label.bindTo('text', marker, 'markertext'); 
           marker.setMap(null); 
        }; 
        } 
        }); 

       } 
      </script> 
      </head> 

      <body onload="initialize()"> 
       <div id="map"></div> 
       <div id="ft-data"></div> 
      </body> 
     </html> 
+0

辉煌。只是我希望的线索。能够为我的测试案例做这项工作。 ChartTools API处理将FT响应对象转换为DataTable的许多便利,但应用500行限制。直接使用Ajax允许人们绕过这个限制,而且还能直接处理它返回的底层数据结构。 – prototype

1

Gviz API确实对给定查询有500行限制。

任何表限制为100,000 可映射行,但这远远超出您报告的20,000行。

当前接受可信测试人员的新JavaScript API为查询返回的任意数量的行提供了JSON格式支持。您可以通过此组中的成员资格申请办理的TT程序: https://groups.google.com/group/fusion-tables-api-trusted-testers

-Rebecca

0

我经常通过删除所有行和插入新的刷新2500行的表。我的代码中构建INSERT sql的循环有一个嵌套的循环,数量为400,发送该sql,然后开始构建另一个与下一个400记录。