我正在尝试使用Derek制作的模板创建一个可搜索的地图。 成功设置复选框后,我尝试显示符合derek instructions的结果列表。 div是可见的,但结果却丢失了。 (对不起,我对javaskript不太熟悉,但我克服了我在这里发帖的犹豫。)
这是索引的一部分:
<p>Take a look at the <a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples'>wiki</a> to see how to add your own custom filters and views like:</p>
<h4>
Recycling services
</h4>
<ul class='inputs-list unstyled'>
<li>
<label class='checkbox inline'>
<input type='checkbox' id='cbType1' />
<span class='filter-box filter-blue'></span>
City drop-off location
</label>
</li>
<li>
<label class='checkbox inline'>
<input type='checkbox' id='cbType2' />
<span class='filter-box filter-green'></span>
Private business
</label>
</li>
</ul>
<div class='well'>
<div id='results_list'></div>
</div>
maps_lib.js看起来像这样:
self.submitSearch = function(whereClause, map) {
var self = this;
//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
self.searchrecords = new google.maps.FusionTablesLayer({
query: {
from: self.fusionTableId,
select: self.locationColumn,
where: whereClause
},
styleId: 2,
templateId: 2
});
self.fusionTable = self.searchrecords;
self.searchrecords.setMap(map);
self.getCount(whereClause);
MapsLib.getList(whereClause);
};
并在maps_lib.js中进一步向下
getList= function(whereClause) {
var selectColumns = 'Name, Ort ';
MapsLib.query({
select: selectColumns,
where: whereClause
}, function(response) {
MapsLib.displayList(response);
});
},
displayList= function(json) {
MapsLib.handleError(json);
console.log(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();
},