在 Google Maps v3 页面中使用 Fusion Tables 查询的结果更新 jqGrid 表答案

【问题标题】：Update jqGrid table with the results of Fusion Tables query in a Google Maps v3 page在 Google Maps v3 页面中使用 Fusion Tables 查询的结果更新 jqGrid 表
【发布时间】：2011-12-04 07:38:42
【问题描述】：

我希望了解如何从 Fusion Tables (FT) 更新 jqGrid 表 -

目前，我可以在 Google 地图上搜索或滚动，发送一个事件侦听器，该事件侦听器编译视口/地图空间边界的 FT 查询，以获得一组新结果。我想使用新的 FT 查询字符串（或者可以使用 Google 代码来检索数据 - query.send(getData);）用新值更新 jqGrid 表。

在我开始使用 jqGrid 之前，我尝试/成功使用了 Google Visualization API，其中一些代码如下所示。谁能建议如何从 table.draw 移动到加载/重新加载 jqGrid 表？提前非常感谢。

function tilesLoaded() {
        google.maps.event.clearListeners(map, 'tilesloaded');
        google.maps.event.addListener(map, 'zoom_changed', getSpatialQuery);
        google.maps.event.addListener(map, 'dragend', getSpatialQuery);
        getSpatialQuery();  
    }   

    function getSpatialQuery() {
      sw = map.getBounds().getSouthWest();
      ne = map.getBounds().getNorthEast();
      var spatialQuery = "ST_INTERSECTS(latitude, RECTANGLE(LATLNG(" + sw.lat() + "," + sw.lng() + "), LATLNG(" + ne.lat() + "," + ne.lng() + ")))";

      changeDataTable(spatialQuery);
    }

function changeDataTable(spatialQuery) {
  var whereClause = "";
  if(spatialQuery) {
    whereClause =  " WHERE " + spatialQuery;
  }
  var queryText = encodeURIComponent("SELECT 'latitude', 'longitude', 'name' FROM xxxxxxxx" + whereClause + " LIMIT 50");
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
  query.send(getData);
}

function getData(response) {
  var table = new google.visualization.Table(document.getElementById('visualization'));
  table.draw(response.getDataTable(), {showRowNumber: true});
}

哦，我使用 Oleg 的代码 jqGrid returns blank cells 作为基础，看看我是否可以得到一个简单的多选表来从我的 FT 中提取数据 - 这与简单的 mod 的

配合得很好

网址：'http://www.google.com/fusiontables/api/query?sql=' +

【问题讨论】：

在哪个网络浏览器中，the demo 中有来自the answer 的空白单元格？由于安全问题，我之前在 IE9 中遇到过问题，但现在一切正常。
啊抱歉——也许我在引用你的好例子时并不清楚。如果我只想要来自 Fusion Table 源的“静态”表，那么您的示例运行良好。我想做的是使用您的示例来说明如何从 FT 源制作表格，但每次用户移动/更新 Google 地图时都要更新表格。我在本地文件上尝试同时使用 Chrome、Firefox 和 IE9
抱歉，我不太了解 Fusion Table。是否有一个 API 使用带有参数的 URL 来获取您需要的 JSON/JSONP 格式的信息？
groups.google.com/group/fusion-tables-users-group/browse_thread/…
抱歉，超时了（正在尝试编辑我的评论，doh me）。在 jsoncallback 上进行更多搜索时，我发现了这个线程：reddmetrics.com/2011/08/10/… 所以我想我可以尝试一下，尽管我不太确定如何使用该 URL 中的示例来更新 jqGrid 表。感谢您的回复，非常感谢！

标签： json google-maps jqgrid google-maps-api-3 google-fusion-tables

【解决方案1】：

如果这对某人有帮助，我已经提取了一些我想出的代码并将其粘贴在下面：

// You can get the map bounds via then pass it via a function (below is hacked from several functions
sw = map.getBounds().getSouthWest();
ne = map.getBounds().getNorthEast();
var whereClause = "ST_INTERSECTS(latitude, RECTANGLE(LATLNG(" + sw.lat() + "," + sw.lng() + "), LATLNG(" + ne.lat() + "," + ne.lng() + ")))";

//construct the URL to get the JSON
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
var queryUrlTail = '&jsonCallback=?'; // 
var queryOrderBy = ' ORDER BY \'name\' ASC';
var queryMain = "SELECT * FROM " + tableid + whereClause + queryOrderBy + " LIMIT 100";
var queryurl = encodeURI(queryUrlHead + queryMain + queryUrlTail);

//use the constructed URL to update the jqGrid table - this is the part that I didn't know in my above question
$("#gridTable").setGridParam({url:queryurl});
$("#gridTable").jqGrid('setGridParam',{datatype:'jsonp'}).trigger('reloadGrid');

【讨论】：