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 回答