本文介绍了绕过500行限制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写了一个令我满意的Google Fusion Tables脚本(如下)，但该脚本仅在我的表中加载500行的点，该表有超过20,000行.这是我第一次在这个社区，发现这个极限真的让我感到很惊讶.有什么方法可以加载所有行吗?
I have written a Google Fusion Tables script I'm happy with (below), but it's loading only 500 rows of points in my table, which has over 20,000 rows. This is my first time in this neighborhood and I was really surprised to find the limit. Is there some way to load all the rows?
<!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>
推荐答案
我通过使用json调用方法解决了该问题.下面的代码.
I solved the problem by using the json call method. Code below.
<!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>
这篇关于绕过500行限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！