Question

我正在尝试显示一个中转路线图，允许用户点击复选框按方向过滤。我一直得到“数据可能仍在加载..”错误，似乎无法解决刷新/缩放/等。

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

的更新

好的，所以我尝试在第二天将图层切换回来并且有效！但是在对代码和/或融合表数据进行一些编辑之后，我遇到了类似的问题，一些停止/样式没有渲染。大约一个小时后，样式开始显示一些点..（停止应该是大或小绿色图标）

map screenshot

也许这是刷新瓷砖的问题？因为正确显示的停止看起来它们都在一个地图图块中，并且随着我缩放而改变。有没有遇到过这个？如果是这样，有没有办法强制刷新或阻止这种情况发生？

代码在这里：http://jsfiddle.net/mobilemelody/u9vhD/4/

Answer 1

我想我现在想出了解决办法。由于某种原因，当我切换图层的顺序时，它的工作原理。

这是脚本的更新部分

// 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);
        }
    }

然而，当以这种方式订购时，路线最终位于停靠点之上，使得点击停靠点并使弹出的信息窗口变得有点棘手......如果有人有更好的解决方案，非常感谢

谷歌地图＆amp;具有多个层的融合表API

1 个答案: