1

我编写了一个我很满意的 Google Fusion Tables 脚本（如下），但它只在我的表中加载了 500 行点，该表有超过 20,000 行。这是我第一次来这个社区，我真的很惊讶地发现了这个限制。有没有办法加载所有的行？

    <!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>
4

4 回答 4

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>
于 2012-06-02T20:22:09.793 回答
1

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

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

新的 Javascript API，目前接受 Trusted Testers，为查询返回的任意数量的行提供 JSON 格式支持。您可以通过请求成为该组的成员来申请 TT 计划： https ://groups.google.com/group/fusion-tables-api-trusted-testers

-丽贝卡

于 2012-06-12T23:37:35.373 回答
0

fusiontables/gvizdata URL 用于 Gviz 图表，因此限制为 500 个点。还有其他没有这种限制的查询方法。有关示例，请参见https://developers.google.com/fusiontables/docs/sample_code。

于 2012-06-02T06:47:54.040 回答
0

我经常通过删除所有行并插入新行来刷新一个 2500 行的表。我的代码中构造 INSERT sql 的循环有一个嵌套循环，它只计数到 400，发送该 sql，然后开始使用接下来的 400 条记录构建另一个循环。

于 2012-06-20T12:47:32.407 回答