Question

我很确定我知道我的代码存在什么问题，但我不确定如何修复它。

我有一个谷歌融合表，我正在查询生成一个菜单，里面有单选按钮。一个谷歌融合表的地图就像谷歌地图一样可以在页面上显示。

当我硬编码几个单选按钮并单击它们时，它会根据元素的ID在地图上亮起项目。我使用google.maps.event.addDomListener来完成这项神奇工作。所以效果很好。

现在我想更进一步，实际从谷歌融合表中提取数据，以便显示我在表格中最新的项目列表。所以，我使用jQuery和$ .get命令来获取jsonp中的feed。我正在输出2列数据并动态构建单选按钮，方法是将它们连接到innerHTML行 - 将其附加到div。

所以，我认为这个问题与DOM有关，但我不知道如何首先加载单选按钮然后加载到地图中以便所有地图事件都可以使用无线电实际上做了一些事情。

问题是我需要进行哪些修改才能使我的动态生成的单选按钮与我的Google融合地图一起使用？

这是我的javascript代码：

    function initialize() {
    var table = ########;


  var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(30.6, -108.1),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var layer = new google.maps.FusionTablesLayer();
    filterMap(layer, table, map);

    getData(table);

    google.maps.event.addDomListener(document.getElementById('num1'),
        'click', function() {
          filterMap(layer, table, map);

    });

    google.maps.event.addDomListener(document.getElementById('num2'),
        'click', function() {
          filterMap(layer, table, map);

    });

    }


  // Filter the map based on checkbox selection.
  function filterMap(layer, table, map) {
    var where = generateWhere();

    if (where) {
      if (!layer.getMap()) {
        layer.setMap(map);
      }
      layer.setOptions({
        query: {
          select: "State",
          from: table,
          where: where
        }
      });
    } else {
      layer.setMap(null);
    }
  }

  // Generate a where clause from the checkboxes. If no boxes
  // are checked, return an empty string.
  function generateWhere() {
    var filter = [];
    var bugs = document.getElementsByName('bug');
    for (var i = 0, bug; bug = bugs[i]; i++) {
      if (bug.checked) {
        var BugName = bug.value.replace(/'/g, '\\\'');
        filter.push("'" + BugName + "'");
      }
    }
    var where = '';
    if (filter.length) {
      where = "'BugName' IN (" + filter.join(',') + ')';
    }
    return where;
  }


    // build the menu     
    function getData(table) {
var queryUrlHead = 'http://www.google.com/fusiontables/api/query?sql=';
    var queryUrlTail = '&jsonCallback=?'; // ? could be a function name

    // write your SQL as normal, then encode it
    var query = "SELECT BugName, bugAbbr FROM " + table + " LIMIT 1";
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, dataHandler, "jsonp");
    }

    function dataHandler(d) {
    // get the actual data out of the JSON object
    var data = d.table.rows;

var ftdata = ['<div>'];

for (var i = 0; i < data.length; i++) {
    ftdata.push('<input type="radio" id="'+data[i][1]+'" value="'+data[i][0]+'" name="bug">'+data[i][0]+'');
}

ftdata.push('</div>');
    document.getElementById('ft-data').innerHTML = ftdata.join(''); 
    } 


   google.maps.event.addDomListener(window, 'load', getData);
   google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

这个网站有一堆示例代码。 http://csessig.wordpress.com/category/fusion-tables/

谷歌融合地图 - 从谷歌融合表查询动态菜单

1 个答案: