Question

我正在尝试使用Derek制作的精美模板制作一个可搜索的地图。

我已尝试过所有内容，但不知何故，我无法显示结果列表。 Div是可见的，但没有结果。希望可以有人帮帮我。我跟着these instructions：

这是索引的一部分

<a class='btn btn-primary' id='search' href='#'>
          <i class='glyphicon glyphicon-search'></i>
          Zoeken
        </a>
        <a class='btn btn-default' id='reset' href='#'>
          <i class='glyphicon glyphicon-repeat'></i>
          Reset
        </a>
      </div>
      <div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
       <div class='well'> <div id='results_list'></div> </div>
    </div>
    <div class='col-md-8'>
      <noscript>
        <div class='alert alert-info'>
          <h4>Your JavaScript is disabled</h4>
          <p>Please enable JavaScript to view the map.</p>
        </div>
      </noscript>
      <div id='map_canvas'></div>

这就是maps_lib.js

submitSearch: function(whereClause, map, location) {
//get using all filters
//NOTE: styleId and templateId are recently added attributes to load custom marker styles and info windows
//you can find your Ids inside the link generated by the 'Publish' option in Fusion Tables
//for more details, see https://developers.google.com/fusiontables/docs/v1/using#WorkingStyles

MapsLib.searchrecords = new google.maps.FusionTablesLayer({
  query: {
    from:   MapsLib.fusionTableId,
    select: MapsLib.locationColumn,
    where:  whereClause
  },
  styleId: 2,
  templateId: 2
});
MapsLib.searchrecords.setMap(map);
MapsLib.getCount(whereClause);
MapsLib.getList(whereClause);},

而且：

    getCount: function(whereClause) {
    var selectColumns = "Count()";
    MapsLib.query(selectColumns, whereClause, "", "", "MapsLib.displaySearchCount");
  },

  displaySearchCount: function(json) {
    MapsLib.handleError(json);
    var numRows = 0;
    if (json["rows"] != null)
      numRows = json["rows"][0];

    var name = MapsLib.recordNamePlural;
    if (numRows == 1)
    name = MapsLib.recordName;
    $( "#result_box" ).fadeOut(function() {
        $( "#result_count" ).html(MapsLib.addCommas(numRows) + " " + name + " gevonden");
      });
    $( "#result_box" ).fadeIn();
  },

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

displayList: function(json) {
  MapsLib.handleError(json);
  var data = json["rows"];
  var template = "";

  var results = $("#results_list");
  results.hide().empty(); //hide the existing list and empty it out first

  if (data == null) {
    //clear results list
    results.append("<li><span class='lead'>No results found</span></li>");
  }
  else {
    for (var row in data) {
      template = "\
        <div class='row-fluid item-list'>\
          <div class='span12'>\
            <strong>" + data[row][0] + "</strong>\
            <br />\
            " + data[row][1] + "\
            <br />\
            " + data[row][2] + "\
            <br />\
            " + data[row][3] + "\
          </div>\
        </div>"
      results.append(template);
    }
  }
  results.fadeIn();
},

Answer 1

问题似乎出现在这个函数中：

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats";
  MapsLib.query(selectColumns, whereClause, "MapsLib.displayList");
},

我认为它应该像这样表示：

getList: function(whereClause) {
  var selectColumns = "Achternaam, Adres, Postcode, Woonplaats ";
  MapsLib.query(selectColumns, whereClause, "", "", "MapsLib.displayList");
},

Answer 2

我不知道你是否还在寻找这个问题的答案，但也许其他人正在浏览这些主题。使用Derek的精彩模板 - 这是我用于在主（索引）页面上创建容器框的代码。

<div class='well'>
  <div class="scrollr" id='results_list'></div>
</div>

注意：我添加了“scrollr”引用，并在“custom.css”文件中为其创建了代码。这只是在结果列表框周围放置一个边框并使其可滚动。这是我添加到custom.css文件的样式代码：

.scrollr {
    height: 400px;
    overflow: scroll;
    border-style: solid;
    border-color: darkgray;
    background-color: lightgray;
}

最后，这是我在“displaySearchCount”函数之后添加到“maps_lib.js”文件中的代码。 // DISPLAY RESULTS FUNCIION --------------------------------------------- -------------------------------------------

MapsLib.prototype.getList = function(whereClause) {
    var self = this;
    var selectColumns = 'Column1, Column2, Column3, Column4, Column5';

    self.query({ 
      select: selectColumns, 
      where: whereClause 
    }, function(response) { 
      self.displayList(response);
     });


  },

  MapsLib.prototype.displayList = function(json) {
    var self = this;

    var data = json['rows'];
    var template = '';

    var results = $('#results_list');
    results.hide().empty(); //hide the existing list and empty it out first

    if (data == null) {
      //clear results list
      results.append("<li><span class='lead'>No results found</span></li>");
    }
    else {
      for (var row in data) {
        template = "\
          <div class='row-fluid item-list'>\
            <div class='span12'>\
              <strong>" + data[row][0] + "</strong>\
              <br />\
              " + data[row][1] + "\
              <br />\
              " + data[row][2] + "\
              <br />\
              " + data[row][3] + "\
               <br />\
              " + data[row][4] + "<br>\
            </div>\
          </div>";
        results.append(template);
      }
    }
    results.fadeIn();
  },

希望这有助于某人。

结果列表未显示（google-fusion-tables template derek）

2 个答案: