0

我正在尝试显示允许用户单击复选框以按方向过滤的公交路线图。我不断收到“数据可能仍在加载..”错误，似乎无法在刷新/缩放/等上解决。

有两层（一层带有路线，另一层带有停靠点）引用了两个谷歌融合表。相同的方向过滤器输入两个表的查询（即，停止和路线的 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/

4

1 回答 1

0

我想我现在想出了一个解决方法。出于某种原因，当我切换图层的顺序时，它可以工作。

这是脚本的更新部分

// Filter function to create query
    function filterMap(routeLayer, stopLayer, map, routeNumber) {
        var where = generateWhere();

        if (where) {
            if (!stopLayer.getMap()) {
                stopLayer.setMap(map);
            }
            if (!routeLayer.getMap()) {
                routeLayer.setMap(map);
            }

            stopLayer.setOptions({
                query: {
                    select: 'latitude',
                    from: '1GTjjCaqkYTM3IDhrt2x8pWO73wCu7KTM1bbEcG8',
                    where: "'Marin Transit Routes' LIKE '%" + routeNumber + "%' AND " + where
                }
            });

            routeLayer.setOptions({
                query: {
                    select: 'Location',
                    from: '1RG-EcymqePVLwa-7lmmkQVdn0RCW4fjQJFouTsc',
                    where: "'Route Number' LIKE " + routeNumber + " AND " + where
                },
                suppressInfoWindows: true
            });

        } else {
            stopLayer.setMap(null);
            routeLayer.setMap(null);
        }
    }

但是，以这种方式订购时，路线最终会位于停靠点的顶部，这使得单击停靠点并弹出信息窗口有点棘手。如果有人有更好的解决方案，它'非常感谢

于 2012-07-27T21:26:28.563 回答