我試圖顯示一個過境路線圖,允許用戶點擊複選框按方向過濾。我不斷收到「數據可能仍在加載..」錯誤,似乎沒有解決刷新/縮放/等。谷歌地圖和融合表與多個圖層的
有兩層(一個有路線,另一個有停靠點)引用兩個谷歌融合表。相同的方向濾波器饋入兩個表的查詢(即,用於停止和路由的NB濾波器)
我試過只顯示一層(通過註釋掉其他),並且兩者似乎都能正常工作。另外,停止數據表有大約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>
UPDATE
確定的代碼,所以我嘗試切換在第二天繞回來,它工作!但是在對代碼和/或融合表數據進行一些編輯之後,我遇到了一些類似的問題,其中一些停止/造型沒有渲染。大約一個小時左右,造型開始出現了一些觀點。(站應該都是或大或小的綠色圖標)
也許是與清爽的瓷磚的問題嗎?因爲正確顯示的站點看起來像是全部在一個地圖塊中,並且在我縮放時會發生變化。有沒有人遇到過這個?如果是這樣,有什麼辦法來強制刷新或防止這種情況發生?
代碼在這裏:http://jsfiddle.net/mobilemelody/u9vhD/4/
我把你的代碼放在jsFiddle上:http://jsfiddle.net/odi86/tzswC/。那麼究竟有什麼不工作?我無法重現錯誤。是否有可能將樣式規則添加到兩個圖層?因爲FT只允許一個圖層應用樣式。 – Odi 2012-07-27 17:55:05
感謝您的回覆。當我測試該鏈接時,我仍然收到錯誤。另外,我還沒有添加任何樣式。然而,我想我想出了它(或者至少是一個解決方法)。出於某種原因,當我切換它的工作層的順序。 – Melody 2012-07-27 21:21:42