0

ユーザーがチェックボックスをクリックして方向でフィルタリングできるトランジットルートマップを表示しようとしています。更新/ズームなどで解決されないように見える「データがまだロードされている可能性があります..」というエラーが表示され続けます。

2 つの Google Fusion テーブルを参照する 2 つのレイヤー (1 つはルート、もう 1 つは停留所) があります。同じ方向フィルタが両方のテーブルのクエリにフィードされます (つまり、停留所とルートの両方に対する NB フィルタ)。

1 つのレイヤーのみを表示しようとしましたが (他のレイヤーをコメントアウトして)、どちらも単独で正常に動作するようです。また、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>


アップデート

わかりましたので、次の日にレイヤーを元に戻そうとしましたが、うまくいきました! しかし、コードやフュージョン テーブル データを編集した後、いくつかの停止/スタイリングがレンダリングされないという同様の問題が発生していました。約 1 時間後、いくつかのポイントのスタイリングが表示され始めました.. (ストップはすべて、大きなまたは小さな緑色のアイコンである必要があります) 。

マップのスクリーンショット

多分それはタイルをリフレッシュすることに問題がありますか? 正しく表示されたストップはすべて 1 つのマップ タイル内にあるように見え、ズームすると変化します。誰かがこれに遭遇しましたか？もしそうなら、リフレッシュを強制したり、これが起こらないようにする方法はありますか?

コードはこちら: 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 に答える