我正在尝试显示允许用户单击复选框以按方向过滤的公交路线图。我不断收到“数据可能仍在加载..”错误,似乎无法在刷新/缩放/等上解决。
有两层(一层带有路线,另一层带有停靠点)引用了两个谷歌融合表。相同的方向过滤器输入两个表的查询(即,停止和路线的 NB 过滤器)
我尝试只显示一层(通过注释掉另一层),并且两者似乎都可以正常工作。另外,stops 数据表有大约 600 个条目,所以我不认为这是一个限制问题?
这是中的代码<head>
<script type="text/javascript">
function initialize() {
// Change these variables for each route
var routeNumber = '257'; // Route number as string
var mapLatitude = 37.9985; // Center of map latitude
var mapLongitude = -122.5372; // Center of map longitude
var zoomLevel = 13; // Map zoom level
// Map display options
var myOptions = {
center: new google.maps.LatLng(mapLatitude, mapLongitude),
zoom: zoomLevel,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create fusion table layers
var stopLayer = new google.maps.FusionTablesLayer();
var routeLayer = new google.maps.FusionTablesLayer();
filterMap(routeLayer, stopLayer, map, routeNumber);
// Call filter function on click action
google.maps.event.addDomListener(document.getElementById('NB'),
'click', function() {
filterMap(routeLayer, stopLayer, map, routeNumber);
});
google.maps.event.addDomListener(document.getElementById('SB'),
'click', function() {
filterMap(routeLayer, stopLayer, map, routeNumber);
});
// Filter function to create query
function filterMap(routeLayer, stopLayer, map, routeNumber) {
var where = generateWhere();
if (where) {
if (!routeLayer.getMap()) {
routeLayer.setMap(map);
}
if (!stopLayer.getMap()) {
stopLayer.setMap(map);
}
routeLayer.setOptions({
query: {
select: 'Location',
from: '1RG-EcymqePVLwa-7lmmkQVdn0RCW4fjQJFouTsc',
where: "'Route Number' LIKE " + routeNumber + " AND " + where
}
});
stopLayer.setOptions({
query: {
select: 'latitude',
from: '1GTjjCaqkYTM3IDhrt2x8pWO73wCu7KTM1bbEcG8',
where: "'Marin Transit Routes' LIKE '%" + routeNumber + "%' AND " + where
}
});
} else {
stopLayer.setMap(null);
}
}
// Generates string of checked options to feed into query
function generateWhere() {
var filter = [];
var directions = document.getElementsByName('direction');
for (var i = 0, direction; direction = directions[i]; i++) {
if (direction.checked) {
var directionName = direction.value.replace(/'/g, '\\\'');
filter.push("'" + directionName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Direction' IN (" + filter.join(',') + ')';
}
return where;
}
}
</script>
这是中的代码<body>
<div>
<input type="checkbox" checked="checked" name="direction" id="NB" value="NB" /><label>NB</label>
<input type="checkbox" checked="checked" name="direction" id="SB" value="SB" /><label>SB</label>
</div>
更新
好的,所以我尝试在第二天左右将图层切换回来,它奏效了!但是在对代码和/或融合表数据进行了一些编辑之后,我遇到了类似的问题,一些停止/样式没有渲染。大约一个小时左右后,一些点的样式开始显示..(停止都应该是大的或小的绿色图标)
也许这是刷新瓷砖的问题?因为正确显示的站点看起来都在一个地图图块中,并且随着我缩放而变化。有没有人遇到过这个?如果是这样,是否有某种方法可以强制刷新或防止这种情况发生?
代码在这里:http: //jsfiddle.net/mobilemelody/u9vhD/4/