0

異なるフュージョン テーブルを使用するサイトを作成しようとしています。いくつかの状態を持つドロップダウン メニューがあります。各州には独自のフュージョン テーブルがあります

州を選択すると、マップがその州の Fusion Table をロードするようにしたいと思います。

それ、どうやったら出来るの？

以下は、これまでの私の JavaScript コードです (ファイル名は「script.js」です)。その下に HTML コードがあります。

ドロップダウンを介して状態を変更するとき、マップがドロップダウンで状態の Fusion Table マップをロードするようにします。現在、それは行われていません。 

$(document).ready(function(){
    var states = {
        'Alabama':'3348442',
        'Alaska':'3370522'
    };
    // SECTION 1: ADDING HTML TO DOM
    var bodyDivs = [
        '<div id="map-canvas" />',
        '<div id="address-form-container" />',
        '<div id="state-select-container"><select id="state-select" /></div>'
    ];

    var addressContainer = [
        '<span id="form pretext"> Enter a city name or address </span>',
        '<input id="address" type="textbox" />',
        '<input type="button" value="Search" />'
    ];

    // Append the body to <html>
    $('html').append('<body />');
    for (var i=0; i<bodyDivs.length; i++){
        $('body').append(bodyDivs[i]);
    };

    // Append the address form to <body>
    for (var i=0; i<addressContainer.length; i++){
        $('div#address-form-container').append(addressContainer[i]);
    };

    // Append state names to the body
    for (var state in states){
        $('select').append('<option value='+state+'>'+state+'</option>');
    };
    // DONE ADDING HTML TO DOM


    // SECTION 2: Create the Google map with the coordinates and add the Fusion Tables layer to it. Plus, it zooms and centers to whatever state is selected.
    var geocoder;
    var gmap;
    var locationColumn = "'geometry'";
    var condition = "'Median income (dollars)'>0";
    var selectedState = document.getElementById("state-select").value;
    var tableId = states[selectedState];    
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    function initialize(){
        geocoder = new google.maps.Geocoder(); // This variables is used to automate zooming and centering in this script
        gmap = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); // Removing this removes the Google Maps layer, but would keep any layers on top of it

        // The Fusion Tables layer variable
        var layer = new google.maps.FusionTablesLayer({
            query: {
                select: locationColumn,
                from: tableId,
                where: condition
            }
        });

        // This code snippet centers and zooms the map to the selected state.
        geocoder.geocode(
            {
                'address':selectedState
            },
            function(results,status){
                var sw = results[0].geometry.viewport.getSouthWest();
                var ne = results[0].geometry.viewport.getNorthEast();
                var bounds = new google.maps.LatLngBounds(sw,ne);

                gmap.fitBounds(bounds)
            }
        );

        layer.setMap(gmap);

        google.maps.event.addDomListener(selectedState,'change',function(){
            updateMap(layer,tableId,locationColumn);
        });         
    }


    // SECTION 3: Find the address once the button is clicked
    $(':button').click(
        function codeAddress(){
            var address = document.getElementById("address").value;

            geocoder.geocode(
                {
                    'address':address
                },
                function(results,status){
                    if(status===google.maps.GeocoderStatus.OK){
                        var addressSW = results[0].geometry.viewport.getSouthWest();
                        var addressNE = results[0].geometry.viewport.getNorthEast();
                        var bounds = new google.maps.LatLngBounds(addressSW,addressNE);

                        gmap.fitBounds(bounds);
                    } else {
                        alert("Couldn't find address for the following reason: " + status + ". Sorry about that. Please try another address.");
                    }
                }
            );
        }
    );


    function updateMap(layer,tableId,locationColumn){
        if (selectedState) {
            tableId = states[selectedState];

            layer.setOptions({
                query: {
                    select: locationColumn,
                    from: tableId,
                    where: condition
                }
            });

            geocoder.geocode(
                {
                    'address':selectedState
                },
                function(results,status){
                    var sw = results[0].geometry.viewport.getSouthWest();
                    var ne = results[0].geometry.viewport.getNorthEast();
                    var bounds = new google.maps.LatLngBounds(sw,ne);

                    gmap.fitBounds(bounds)
                }
            );          
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
});

CSS:

#map-canvas {
height: 800px;
width: 1000px;

}

HTML コード:

<html>
    <head>
        <meta charset="utf8">
        <title>TESTING THE MAPS</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="public/js/script.js"></script>
    </head>
</html>

編集: HTML、CSS、および JS ファイルへのリンク ---
http://speedy.sh/xRkZF/maptest.html
http://speedy.sh/zSt5p/script.js
http://speedy.sh/uCPxZ /style.css

4

1 に答える 1

2

selectedState をハードコーディングしましたが、ドロップダウンが変更されたときに現在の値を取得する必要があります。

変更リスナーを次のように変更します。

google.maps.event.addDomListener(document.getElementById('state-select'),
  '変化する'、
  関数（）{
        updateMap(レイヤー、this.value、locationColumn);
    });

updateMap に渡される 2 番目の引数は、ドロップダウンから選択された状態になります。また、updateMap を変更し、2 番目の引数の名前を selectedState に変更します。




関数 updateMap(layer, selectedState ,locationColumn){
  //関数コードはそのままでよい
  }

すべてがうまくいくはずです。

于 2012-12-04T02:27:07.833 に答える