我已经寻找一种方法来绕过我的查询的 500 行限制，并找到了几个几乎可以帮助我的示例。这是一个工作示例。我的代码在这里查询“操作员”列表，并根据该选择动态返回他们操作的“井”。它可以工作，但受 GViz 限制为 500 行，所以我读到的是我需要使用新的 Fusion Tables Api 来传递 JSON，这样我就不必使用 GViz 并且可以获得所有行。我希望我知道该怎么做。有人可以帮我迁移或制作它，以便我可以返回所有行而不是仅返回 500 行吗？太感谢了！
<!DOCTYPE html>
<!--
copyright (c) 2011 Google inc.
You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>northdakotarigsmap.com - Wells Map</title>
<style>
body { font-family: Arial, sans-serif; }
#map_canvas { height: 650px; width:900px; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.load('visualization', '1', {});
var myLatLng = null;
var markloc = null;
var cachedFirstOption = ""; // Save the selected option
var tableid = '1X1BA0s3R8fBfPuiuuYUYsWhV_u_6RWVMVoDqsAY'; // table id
var layer = new google.maps.FusionTablesLayer();
// Initialize the map and set the layer
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(47.724544549099676, -100.43701171875), //the center lat and long
scaleControl: true,
zoom: 7, //zoom
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_LEFT},
mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
});
layer.setOptions({
query: {
select: 'geometry',
from: tableid
}
});
layer.setMap(map);
}
// The following function, changeData, runs when the user selects an option from the first
// select menu. This function removes any options from the second menu. If the option
// is All, it resets the query to show all results on the map. Otherwise, it updates
// the data on the map to match the selected option, then sends a gviz query to update the
// second select menu.
function changeData(firstOption) {
// Remove any options from second menu
secondSelect = document.getElementById("wnames");
numChildren = secondSelect.childNodes.length;
for(i = 1; i < numChildren; i++) {
secondSelect.removeChild(secondSelect.childNodes[1]);
}
if(firstOption == "%") {
layer.setOptions({
query: {
select: 'geometry',
from: tableid
}
});
} else {
// Save the option and update the map
cachedFirstOption = firstOption;
updateMap(firstOption, "%");
var queryText = encodeURIComponent("https://www.googleapis.com/fusiontables/v1/query?sql=SELECT 'Well Name', COUNT() FROM " + tableid + " WHERE 'Operator' LIKE '" + firstOption + "' GROUP BY 'Well Name'&key=AIzaSyAkmt7K8ArFRtBpiI6om-d2uSuI9qbiiAY");
// Set the callback function which will update the second menu
query.send(getData);
}
}
//
//
//I can't get the following code to work
//
//
// This function, getData, is called when query results are returned. It adds options
// to the second select menu based on the results of the query.
function getData(response) {
// Get the number of rows
numRows = response.getDataTable().getNumberOfRows();
// Add options to the select menu based on the results
secondSelect = document.getElementById("wnames");
for(i = 0; i < numRows; i++) {
newoption = document.createElement('option');
newoption.setAttribute('value', response.getDataTable().getValue(i, 0));
newoption.innerHTML = response.getDataTable().getValue(i, 0);
secondSelect.appendChild(newoption);
}
}
// Update the data displayed on the map
function updateMap(firstOption, secondOption) {
secondOption = secondOption.replace("'", "\\'");
layer.setOptions({
query: {
select: 'geometry',
from: tableid,
where: "'Operator' LIKE '" + firstOption + "' AND 'Well Name' LIKE '" + secondOption + "'"
}
});
}
//
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
<div id="select1" style="absolute">
Operator: <select id="delivery" onchange="changeData(this.value);">
<option value="">--Select--</option>
<option value="ABRAXAS PETROLEUM CORP.">ABRAXAS PETROLEUM CORP.</option>
<option value="AMERICAN EAGLE ENERGY CORPORATION">AMERICAN EAGLE ENERGY CORPORATION</option>
<option value="BAYTEX ENERGY USA LTD">BAYTEX ENERGY USA LTD</option>
<option value="BRIGHAM OIL & GAS, L.P.">BRIGHAM OIL & GAS, L.P.</option>
<option value="BURLINGTON RESOURCES OIL & GAS COMPANY">BURLINGTON RESOURCES OIL & GAS COMPANY</option>
<option value="CONTINENTAL RESOURCES, INC.">CONTINENTAL RESOURCES, INC.</option>
<option value="CORINTHIAN EXPLORATION (USA) CORP">CORINTHIAN EXPLORATION (USA) CORP</option>
<option value="CORNERSTONE NATURAL RESOURCES LLC">CORNERSTONE NATURAL RESOURCES LLC</option>
<option value="CRESCENT POINT ENERGY U.S. CORP.">CRESCENT POINT ENERGY U.S. CORP.</option>
<option value="DENBURY ONSHORE, LLC">DENBURY ONSHORE, LLC</option>
<option value="ENDURO OPERATING, LLC">ENDURO OPERATING, LLC</option>
<option value="ENERPLUS RESOURCES USA CORPORATION">ENERPLUS RESOURCES USA CORPORATION</option>
<option value="EOG RESOURCES, INC.">EOG RESOURCES, INC.</option>
<option value="FIDELITY EXPLORATION & PRODUCTION COMPANY">FIDELITY EXPLORATION & PRODUCTION COMPANY</option>
<option value="G3 OPERATING, LLC">G3 OPERATING, LLC</option>
<option value="GMX RESOURCES INC">GMX RESOURCES INC</option>
<option value="HESS CORPORATION">HESS CORPORATION</option>
<option value="HUNT OIL COMPANY">HUNT OIL COMPANY</option>
<option value="KODIAK OIL & GAS (USA) INC.">KODIAK OIL & GAS (USA) INC.</option>
<option value="LIBERTY RESOURCES LLC">LIBERTY RESOURCES LLC</option>
<option value="MARATHON OIL COMPANY">MARATHON OIL COMPANY</option>
<option value="MOUNTAIN VIEW ENERGY INC.">MOUNTAIN VIEW ENERGY INC.</option>
<option value="MUREX PETROLEUM CORPORATION">MUREX PETROLEUM CORPORATION</option>
<option value="NEWFIELD PRODUCTION COMPANY">NEWFIELD PRODUCTION COMPANY</option>
<option value="NORTH PLAINS ENERGY, LLC">NORTH PLAINS ENERGY, LLC</option>
<option value="OASIS PETROLEUM NORTH AMERICA LLC">OASIS PETROLEUM NORTH AMERICA LLC</option>
<option value="OXY USA INC.">OXY USA INC.</option>
<option value="PETRO-HUNT, L.L.C.">PETRO-HUNT, L.L.C.</option>
<option value="QEP ENERGY COMPANY">QEP ENERGY COMPANY</option>
<option value="SAMSON RESOURCES COMPANY">SAMSON RESOURCES COMPANY</option>
<option value="SEQUEL ENERGY, LLC">SEQUEL ENERGY, LLC</option>
<option value="SINCLAIR OIL AND GAS COMPANY">SINCLAIR OIL AND GAS COMPANY</option>
<option value="SLAWSON EXPLORATION COMPANY, INC.">SLAWSON EXPLORATION COMPANY, INC.</option>
<option value="SM ENERGY COMPANY">SM ENERGY COMPANY</option>
<option value="TRIANGLE USA PETROLEUM CORPORATION">TRIANGLE USA PETROLEUM CORPORATION</option>
<option value="TRUE OIL LLC">TRUE OIL LLC</option>
<option value="WATERWORKS EAST FORK, LLC">WATERWORKS EAST FORK, LLC</option>
<option value="WHITING OIL AND GAS CORPORATION">WHITING OIL AND GAS CORPORATION</option>
<option value="WPX ENERGY WILLISTON, LLC">WPX ENERGY WILLISTON, LLC</option>
<option value="XTO ENERGY INC.">XTO ENERGY INC.</option>
<option value="ZAVANNA, LLC">ZAVANNA, LLC</option>
<option value="ZENERGY, INC">ZENERGY, INC</option>
</select>
</div>
<!-- Important: keep the option on the same line as the select tag here because any newlines
will be considered child elements of the select node -->
Well Names: <select id="wnames" onchange="updateMap(cachedFirstOption, this.value)"><option id="secondOption" value="%">--Make selection--</option></select>
</body>
</html>