在Fusion Tables和Google Maps API中，如何根據下拉菜單選擇更改Tables圖層和Map位置？

我想製作一個使用不同Fusion Tables的網站。有一個下拉菜單有幾個州。每個國家都有自己的融合表在Fusion Tables和Google Maps API中，如何根據下拉菜單選擇更改Tables圖層和Map位置？

我想使它所以當你選擇一個狀態下，地圖加載了該州的融合表。

我該怎麼做？

以下是我的JavaScript代碼到目前爲止（文件名是'script.js'）。下面是HTML代碼。

當我改變經由下拉的狀態下，我想在地圖加載了的狀態的融合表地圖中的下拉菜單。現在，它不這樣做。

$(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

來源

2012-12-02 user1626730

您對發佈的代碼有什麼問題？ – geocodezip

當我通過下拉菜單更改狀態時，我希望地圖在下拉菜單中加載狀態的Fusion Table地圖。現在，它不這樣做。 – user1626730

它有什麼作用？任何錯誤？ – geocodezip

你硬編碼selectedState，但你需要獲得當前值下拉變化時。

修改變化監聽到這一點：

google.maps.event.addDomListener(document.getElementById('state-select'), 
    'change', 
    function(){ 
     updateMap(layer,this.value,locationColumn); 
    });

現在傳遞到updateMap第二個參數將是從下拉列表中選擇狀態。同時修改updateMap，改變第二個參數的名稱selectedState：

 

function updateMap(layer,selectedState,locationColumn){ 
    //function code may stay as it is 
    }

一切都應該現在正常工作。

來源

2012-12-04 02:27:07

謝謝， @Dr Molle。雖然我想知道它爲什麼會起作用，但我認爲我只是不熟悉'.addDomListener'的每一個參數（我認爲Fusion Tables API Reference doc沒有太多幫助），而且，我想知道'updateMap'中的每個參數意味着什麼，以及爲什麼首先需要它。 – user1626730

在Fusion Tables和Google Maps API中，如何根據下拉菜單選擇更改Tables圖層和Map位置？

回答

相關問題