사용자가 확인란을 클릭하여 방향별로 필터링 할 수있는 대중 교통 경로지도를 표시하려고합니다. 새로 고침/확대/축소 등에서 해결되지 않는 오류가 계속 발생합니다.여러 레이어가있는 google maps 및 fusion 테이블 API
2 개의 Google 퓨전 테이블을 참조하는 2 개의 레이어 (경로가있는 하나와 다른 하나가 있습니다)가 있습니다. 동일한 방향성 필터가 두 테이블 (즉, 정지 및 경로 모두에 대한 NB 필터)에 대한 쿼리에 제공됩니다.
하나의 레이어를 보여 주려고했는데 (다른 것을 주석 처리 함) 두 필터 모두 자체적으로 정상적으로 작동하는 것 같습니다. . 또한 중지 데이터 테이블에는 약 600 개의 항목이 있으므로 제한적인 문제라고 생각하지 않습니까?
이
는<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
확인의 코드 <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>
이있는 코드이다, 그래서 스위칭 시도 다음날에 레이어가 돌아와서 효과가있었습니다! 하지만 코드 및/또는 융합 테이블 데이터를 편집 한 후에는 렌더링/렌더링되지 않는 일부 정지/스타일과 비슷한 문제가있었습니다. 약 한 시간 정도 후 스타일은
어쩌면 타일을 새로 고침에 문제가있어 (정지는 모두 크고 작은 녹색 아이콘 중 하나를해야한다) ... 포인트 중 일부 보여주는 시작? 정확하게 표시되는 정지 점은 모두 하나의지도 타일 내에있는 것처럼 보이며 줌으로 변경됩니다. 아무도 이것을 만나지 못했습니까? 그렇다면 강제로 새로 고침을하거나이를 방지하는 방법이 있습니까? 여기
코드 : http://jsfiddle.net/mobilemelody/u9vhD/4/
jsFiddle : http://jsfiddle.net/odi86/tzswC/에 코드를 추가했습니다. 정확히 작동하지 않는 것은 무엇입니까? 오류를 재현 할 수 없습니다. 두 레이어에 스타일 규칙을 추가했을 가능성이 있습니까? 왜냐하면 FT는 하나의 레이어에만 스타일을 적용 할 수 있기 때문입니다. 귀하의 회신에 감사드립니다. – Odi
. 그 링크를 테스트했을 때, 나는 여전히 오류가 발생했습니다. 또한, 아직 스타일링을 추가하지 않았습니다. 그러나, 나는 그것을 밖으로 생각했다 (또는 적어도 work-around). 어떤 이유로 레이어의 순서를 바꿨을 때 효과가있었습니다. – Melody