我没有使用 100 万公里(大约 10 分钟后会停止显示),而是尝试使用 Fusion 表并使用复选框在不同的过滤器之间切换。这对于前两个非常有效,但现在其他类别将不会显示,除非第一个或两个被单击并单击关闭。显然有些不对劲。我从 Google 示例(IN,关于比萨店)中窃取了代码,但这对扩展不起作用。另外,我有一个扩展的侧边栏,这并不能帮助我控制它。
我创造了一堆这样的:
google.maps.event.addDomListener(document.getElementById('Food Manufacturing/Wholesale'),
'click', function() {
filterMap(layer, tableId, map);
});
然后是这个:
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Longitude',
from: tableId,
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 stores = document.getElementsByName('store');
for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
var storeName = store.value.replace(/'/g, '\\\'');
filter.push("'" + storeName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Displ_Type' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
然后这些在 div 正文中:
<li><a1><input type="checkbox" name="store" id="cafe" value="Cafe">Cafe</a1></li>
<li><a1><input type="checkbox" name="store" id="Catering" value="Catering"> Catering</a1></li>
<li><a1><input type="checkbox" name="store" id="Cooking School" value="Cooking School"> Cooking School</a1></li>
还有 http://jsfiddle.net/pwhqq/1/
融合表为: https ://www.google.com/fusiontables/DataSource?snapid=S7955100ZHL