2015-09-10 118 views
0

我正在嘗試創建和使用具有20,000行數據和查詢以訪問完整數據集的融合表的查詢 我試圖實現的目標與此類似Sample Fusion Table QueryFusion Tables查詢> 500條結果

但是它使用的google.visualization.Query(」 http://www.google.com/fusiontables/gvizdata ... 它僅限於500個結果。 我想既可使用https://www.googleapis.com/fusiontables/v1/queryhttps://www.googleapis.com/fusiontables/v2/query做的正是與此相同的樣品,但沒有500結果限制 我試過了,失敗了,我正在尋找一些給我看一個樣品,讓我走在正確的軌道上

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Google Maps JavaScript API v3 Example: Map Simple</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map { 
     margin: 0; 
     padding: 0; 
     height: 100%; 
     } 
    </style> 
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<!--Load the AJAX API--> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript" > 
// var tableId = "1zELV0V48On-5c8aqKM_PD2cMQtfy4hByyR5o8sQ"; 
var tableId = "1_2tuZiYRkUZyLEd2fEGqYXYK7FV6i1hUCXk_Pkbv"; 
// my version "1t1QYYwy5AXgaV0biCpHwzh4cVM0iv0aVyBVHNAo"' 
var geocoder = new google.maps.Geocoder(); 
var FusionTablesData = null; 
google.load('visualization', '1', {'packages':['table']}); 
var map; 
var markers = []; 
var infoWindow = new google.maps.InfoWindow(); 

function initialize() { 
var thames = new google.maps.LatLng(-37.14533531325433, 175.56108373542384); 

map = new google.maps.Map(document.getElementById('map_canvas'), { 
center: thames, 
zoom: 14, 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var FTlayer = new google.maps.FusionTablesLayer({query:{from:tableId}, map:map}); 

var queryStr = "SELECT ASSETID, Start_Coordinates, Phone, Url FROM "+tableId+" ORDER BY ASSETID"; 
document.getElementById('info').innerHTML += queryStr +"<br>"; 
var queryText = encodeURIComponent(queryStr); 

    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

query.send(getData); 
} 

function getData(response) { 
if (!response) { 
    alert('no response'); 
    return; 
} 
if (response.isError()) { 
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
    return; 
} 
FusionTablesData = response.getDataTable(); 
var dt = FusionTablesData 

var side_html = '<table style="border-collapse: collapse" border="1" \ 
        cellpadding="5"> \ 
        <thead> \ 
        <tr style="background-color:#e0e0e0"> \ 
         <th>ASSETID</th> \ 
        </tr> \ 
        </thead> \ 
        <tbody>'; 
document.getElementById('info').innerHTML += "rows="+dt.getNumberOfRows()+"<br>"; 
for (var i = 0; i < dt.getNumberOfRows(); i++) { 
    var location = dt.getValue(i,1); 
    var phone = dt.getValue(i,2); 
    var ASSETID = dt.getValue(i,0); 
    var url = dt.getValue(i,3); 

    var html = "<strong><a href='"+url+"'>" + ASSETID + "</a></strong><br />"; 
    html += location + "<br/>"; 
    html += phone + "<br/>"; 
    side_html += '<tr> \ 
        <td><a href="javascript:myclick(' + i + ')">' + ASSETID + '</a></td> \ 
       </tr>'; 


    // geocodeMarker(location, html, i); 

} 

side_html += '</tbody> \ 
      </table>'; 
document.getElementById("side_bar").innerHTML = side_html; 
} 

function geocodeMarker(location, html, i, click) { 
    geocoder.geocode({address:location}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     markers[i] = createMarker(results[0].geometry.location, html) 
     map.setZoom(18);  
     if (click) google.maps.event.trigger(markers[i], 'click'); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     map.setZoom(10); 
     infoWindow.close(); 
    } 
    }); 
} 

function createMarker(point,info) { 
    var myMarkerOpts = { 
    position: point, 
    icon: { url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
     size: new google.maps.Size(7,7), 
     anchor: new google.maps.Point(4,4) 
    } /*, 
    map: map */ 
    }; 

    var marker = new google.maps.Marker(myMarkerOpts); 

    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.close(); 
    infoWindow.setContent(info); 
    infoWindow.setPosition(point); 
    infoWindow.open(map); 
    }); 
    return marker; 
} 

function myclick(num) { 
    var dt = FusionTablesData; 
    if (!markers[num]) { 
    var location = dt.getValue(num,1); 
    var phone = dt.getValue(num,2); 
    var ASSETID = dt.getValue(num,0); 
    var url = dt.getValue(num,3); 
    var html = "<strong><a href='"+url+"'>" + ASSETID + "</a></strong><br />"; 
    if (!!location) html += location + "<br/>"; 
    if (!!phone) html += phone + "<br/>"; 
    geocodeMarker(location, html, num, true); 
    } else { 
    google.maps.event.trigger(markers[num], "click"); 
    } 
} 
</script> 

    <body onload="initialize();"> 
<table border="1"><tr><td> 
    <div id="map_canvas" style="width:600px;height:500px;"></div> 
    </td><td> 
    <div id="side_bar" style="width:200px;height:500px; overflow: auto;"></div> 
</td></tr></table> 

<div id="info"></div> 
    </body> 
</html> 

我知道,這將是一種不同的方法來此,這裏的任何幫助,將不勝感激

我一直奉行一個樣品Getting around the 500 row limit ...但似乎無法得到它的工作即使在適應了我的要求之後,我並沒有真正的樣本,因爲它不起作用,下面是我嘗試的代碼(可能還有很長的路要走,我知道......)

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var tableId = "1_2tuZiYRkUZyLEd2fEGqYXYK7FV6i1hUCXk_Pkbv"; 
    var geocoder = new google.maps.Geocoder(); 
    var FusionTablesData = null; 
    google.load('visualization', '1', { 
     'packages': ['table'] 
    }); 
    var map; 
    var markers = []; 
    var infoWindow = new google.maps.InfoWindow(); 
    var assetsarray = []; 
    var locationssarray = []; 
    var urlsarray = []; 
    var resultarray = []; 

    function initialize() { 
     var thames = new google.maps.LatLng(-37.14533531325433, 175.56108373542384); 

     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: thames, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var FTlayer = new google.maps.FusionTablesLayer({ 
     query: { 
      from: tableId 
     }, 
     map: map 
     }); 

     var queryStr = ""; 
     document.getElementById('info').innerHTML += queryStr; 
     var queryText = encodeURIComponent(queryStr); 
     var query = "SELECT ASSETID, Start_Coordinates, Impressions FROM " + 
     '19VtUfrmaFz1Jk6IumyvW7Q5chzZvLQlTmbewU1rM'; 
     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 = 20000; 

     // Get the variables from the table, in a loop 
     $.ajax({ 
     url: url.join(''), 
     dataType: 'jsonp', 
     success: function(result) { 
      //alert("fusion table query success"); 
      var rows = result['rows']; 
      var side_html = '<table style="border-collapse: collapse" border="1" \ 
        cellpadding="5"> \ 
        <thead> \ 
        <tr style="background-color:#e0e0e0"> \ 
         <th>ASSETID</th> \ 
        </tr> \ 
        </thead> \ 
        <tbody>'; 
      document.getElementById('info').innerHTML += "rows=" + rows.length + "<br>"; 

      //alert(rows.length); 
      for (var i in rows) { 
      var asset_id = rows[i][0]; 
      var location = rows[i][1]; 
      var imps = rows[i][2]; 
      assetsarray.push(rows[i][0]); 
      locationssarray.push(rows[i][1]); 
      urlsarray.push(rows[i][2]); 



      resultarray.push(rows[i][0], rows[i][1], rows[i][2]); 
      side_html += '<tr> \ 
        <td><a href="javascript:myclick(' + i + ')">' + rows[i][0] + '</a></td> \ 
       </tr>'; 
      } 
      side_html += '</tbody> \ 
      </table>'; 
      document.getElementById("side_bar").innerHTML = side_html; 
     } 

     }); 
    } 

    function geocodeMarker(location, html, i, click) { 
     geocoder.geocode({ 
     address: location 
     }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      markers[i] = createMarker(results[0].geometry.location, html) 
      map.setZoom(18); 
      if (click) google.maps.event.trigger(markers[i], 'click'); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      map.setZoom(10); 
      infoWindow.close(); 
     } 
     }); 
    } 

    function createMarker(point, info) { 
     var myMarkerOpts = { 
     position: point, 
     icon: { 
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
      size: new google.maps.Size(7, 7), 
      anchor: new google.maps.Point(4, 4) 
     } 
     /*, 
      map: map */ 
     }; 

     var marker = new google.maps.Marker(myMarkerOpts); 

     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.close(); 
     infoWindow.setContent(info); 
     infoWindow.setPosition(point); 
     infoWindow.open(map); 
     }); 
     return marker; 
    } 

    function myclick(num) { 
     var dt = resultarray; 
     if (!markers[num]) { 
     var location = locationssarray[num]; 
     var ASSETID = assetsarray[num]; 
     var url = urlsarray[num]; 
     var html = "<strong><a href='" + url + "'>" + ASSETID + "</a></strong><br />"; 
     if (!!location) html += location + "<br/>"; 
     geocodeMarker(location, html, num, true); 
     } else { 
     google.maps.event.trigger(markers[num], "click"); 
     } 
    } 
    </script> 

    <body onload="initialize();"> 
    <table border="0"> 
     <tr> 
     <td> 
      <div id="map_canvas" style="width:400px;height:700px;"></div> 
     </td> 
     <td> 
      <div id="side_bar" style="width:60px;height:700px; overflow: auto;"></div> 
     </td> 
     </tr> 
    </table> 

    <div id="info" style="display: none;"></div> 

    </body> 

</html> 

非常感謝

+0

什麼是你的代碼的樣子,你想使用融合表查詢(V1/V2不是可視化庫)? – geocodezip

+0

所需的表格是否是私人的(至少'1zELV0V48On-5c8aqKM_PD2cMQtfy4hByyR5o8sQ'是私人的)?當它是私人的,你想讓任何用戶能夠看到結果(所謂的離線訪問)或只有授權用戶(在線訪問) –

+0

請從您的代碼中刪除我的谷歌分析標籤(「UA-162157-1 「)。 – geocodezip

回答

0

我設法用下面的代碼解決了我的問題,我唯一的問題是在完成查詢之前讓ajax等待。這仍然未解決

<!DOCTYPE html> 
<html> 

<head> 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var tableId = "1_2tuZiYRkUZyLEd2fEGqYXYK7FV6i1hUCXk_Pkbv"; 
    var geocoder = new google.maps.Geocoder(); 
    var FusionTablesData = null; 
    google.load('visualization', '1', { 
     'packages': ['table'] 
    }); 
    var map; 
    var markers = []; 
    var infoWindow = new google.maps.InfoWindow(); 
    var assetsarray = []; 
    var locationssarray = []; 
    var urlsarray = []; 
    var resultarray = []; 

    function initialize() { 
     var thames = new google.maps.LatLng(-37.14533531325433, 175.56108373542384); 

     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: thames, 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var FTlayer = new google.maps.FusionTablesLayer({ 
     query: { 
      from: tableId 
     }, 
     map: map 
     }); 

     var queryStr = ""; 
     document.getElementById('info').innerHTML += queryStr; 
     var queryText = encodeURIComponent(queryStr); 
     var query = "SELECT ASSETID, Start_Coordinates, Impressions FROM " + 
     '19VtUfrmaFz1Jk6IumyvW7Q5chzZvLQlTmbewU1rM'; 
     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 = 20000; 

     // Get the variables from the table, in a loop 
     $.ajax({ 
     url: url.join(''), 
     dataType: 'jsonp', 
     success: function(result) { 
      //alert("fusion table query success"); 
      var rows = result['rows']; 
      var side_html = '<table style="border-collapse: collapse" border="1" \ 
        cellpadding="5"> \ 
        <thead> \ 
        <tr style="background-color:#e0e0e0"> \ 
         <th>ASSETID</th> \ 
        </tr> \ 
        </thead> \ 
        <tbody>'; 
      document.getElementById('info').innerHTML += "rows=" + rows.length + "<br>"; 

      //alert(rows.length); 
      for (var i in rows) { 
      var asset_id = rows[i][0]; 
      var location = rows[i][1]; 
      var imps = rows[i][2]; 
      assetsarray.push(rows[i][0]); 
      locationssarray.push(rows[i][1]); 
      urlsarray.push(rows[i][2]); 



      resultarray.push(rows[i][0], rows[i][1], rows[i][2]); 
      side_html += '<tr> \ 
        <td><a href="javascript:myclick(' + i + ')">' + rows[i][0] + '</a></td> \ 
       </tr>'; 
      } 
      side_html += '</tbody> \ 
      </table>'; 
      document.getElementById("side_bar").innerHTML = side_html; 
     } 

     }); 
    } 

    function geocodeMarker(location, html, i, click) { 
     geocoder.geocode({ 
     address: location 
     }, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      markers[i] = createMarker(results[0].geometry.location, html) 
      map.setZoom(18); 
      if (click) google.maps.event.trigger(markers[i], 'click'); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      map.setZoom(10); 
      infoWindow.close(); 
     } 
     }); 
    } 

    function createMarker(point, info) { 
     var myMarkerOpts = { 
     position: point, 
     icon: { 
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png", 
      size: new google.maps.Size(7, 7), 
      anchor: new google.maps.Point(4, 4) 
     } 
     /*, 
      map: map */ 
     }; 

     var marker = new google.maps.Marker(myMarkerOpts); 

     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.close(); 
     infoWindow.setContent(info); 
     infoWindow.setPosition(point); 
     infoWindow.open(map); 
     }); 
     return marker; 
    } 

    function myclick(num) { 
     var dt = resultarray; 
     if (!markers[num]) { 
     var location = locationssarray[num]; 
     var ASSETID = assetsarray[num]; 
     var url = urlsarray[num]; 
     var html = "<strong><a href='" + url + "'>" + ASSETID + "</a></strong><br />"; 
     if (!!location) html += location + "<br/>"; 
     geocodeMarker(location, html, num, true); 
     } else { 
     google.maps.event.trigger(markers[num], "click"); 
     } 
    } 
    </script> 

    <body onload="initialize();"> 
    <table border="0"> 
     <tr> 
     <td> 
      <div id="map_canvas" style="width:400px;height:700px;"></div> 
     </td> 
     <td> 
      <div id="side_bar" style="width:60px;height:700px; overflow: auto;"></div> 
     </td> 
     </tr> 
    </table> 

    <div id="info" style="display: none;"></div> 

    </body> 

</html> 

期待着在上面的代碼中的任何反饋,非常感謝