使用下拉框在Google Fusion地圖中切換圖層

Question

成功地遵循了一些Fusion地圖示例，並在這裏得到了一些人的幫助。我試圖做一些我一直能找到的例子...

我的地圖包含3層，但我只想一次顯示2個。因此，我在底部添加了一個下拉框，以便您可以在兩個地圖之間切換。我已經添加了一個變量「SecondLayerMap」，並且我認爲（我至少已經嘗試過）讓下拉框改變這個變量。直到3周前我才寫過任何Java（或任何其他編程語言），所以這是一個陡峭的學習曲線！

[我見過的一種方法是有些人在類似的情況下使用了一種融合表，但是在不同列中的數據之間切換。我不認爲我可以這樣做，因爲每個表格中的地理數據都不同，我不希望它們都同時顯示。]

下一步將更改其中一個圖例在地圖上，但我會採取我從這個問題中學到的東西，然後解決那個問題...

感謝您的幫助。

<meta charset="UTF-8"> 
    <title>Smithfield Foods UK</title> 
    <link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" /> 

    <script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 

     function initialize() { 
      var defaultZoom = 10; 
      var defaultCenter = new google.maps.LatLng(52.6500, 1.2800); 
      var locationColumn = 'geometry'; 
      var geocoder = new google.maps.Geocoder(); 
      var SecondLayerMap = '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk' 

      var map = new google.maps.Map(document.getElementById('map-canvas'), { 
       center: defaultCenter, 
       zoom: defaultZoom, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }); 

      var infoWindow = new google.maps.InfoWindow(); 

      // Initialize the first layer 
      var FirstLayer = new google.maps.FusionTablesLayer({ 
       query: { 
       select: 'geometry', 
       from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE' 
       }, 
       map: map, 
       styleId: 3, 
       templateId: 5, 
       suppressInfoWindows: true 
      }); 
      google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map); 
      }); 

      // Initialize the second layer 
      var SecondLayer = new google.maps.FusionTablesLayer({ 
       query: { 
        select: 'PostCode', 
        from: SecondLayerMap 
       }, 
       map: map, 
       styleId: 2, 
       templateId: 2, 
       suppressInfoWindows: true 
      }); 

      google.maps.event.addDomListener(document.getElementById('store'), 'change', function() { 
       var SecondLayerMap = this.value; 
       SecondLayer = new google.maps.FusionTablesLayer({ 
        query: { 
         select: 'Postcode', 
         from: SecondLayerMap 
        } 
       }); 

      }); 


      google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map); 
      }); 

     var legend = document.createElement('div'); 
     legend.id = 'legend'; 
     var content = []; 
     content.push('<h3>Density of Polish speaking population</h3>'); 
     content.push('<p><div class="color red1"></div>=>2%<4%'); 
     content.push('<p><div class="color red2"></div>=>4%<6%'); 
     content.push('<p><div class="color red3"></div>=>6%<10%'); 
     content.push('<p><div class="color red4"></div>=>10%<15%'); 
     content.push('<p><div class="color red5"></div>=>15%<20%') 
     content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">'); 
     legend.innerHTML = content.join(''); 
     legend.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend); 

     var legend2 = document.createElement('div'); 
     legend2.id = 'legend2'; 
     var content2 = []; 
     content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>"); 
     content2.push('<p><img src="red-dot.png"><£1,000'); 
     content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000'); 
     content2.push('<p><img src="green-dot.png">=>£20,000<£40,000'); 

     legend2.innerHTML = content2.join(''); 
     legend2.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2); 

     var zoomToAddress = function() { 
      var address = document.getElementById('address').value; 
      geocoder.geocode({ 
       address: address 
      }, function(results, status) { 
       if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        map.setZoom(10); 
       } else { 
        window.alert('Address could not be geocoded: ' + status); 
       } 
      }); 
     }; 


     google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress); 
     google.maps.event.addDomListener(window, 'keypress', function(e) { 
      if (e.keyCode ==13) { 
      zoomToAddress(); 
     } 
     }); 

     google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() { 
      map.setCenter(defaultCenter); 
      map.setZoom(defaultZoom); 
      layer.setOptions({ 
       query: { 
        select: 'geometry', 
        from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE' 
       } 
      }); 
     }); 

     } 


     // Open the info window at the clicked location 
     function windowControl(e, infoWindow, map) { 
      infoWindow.setOptions({ 
       content: e.infoWindowHtml, 
       position: e.latLng, 
       pixelOffset: e.pixelOffset 
      }); 
      infoWindow.open(map); 
     } 

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

    </script> 
</head> 

<body> 
    <div id="map-canvas"></div> 
    <div> 
     <label>Enter an address:</label> 
     <input type="text" id="address" value="Leeds"> 
     <input type="button" id="search" value="Search"> 
     <input type="button" id="reset" value="Reset"> 
    </div> 
    <div> 
     <select id="store"> 
      <option value ="1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk">Store A</option> 
      <option value ="1QX6QXhAiHXXAcS96RSAmE1Caj8tWebc6d-1_Tjk">Store B</option> 
     </select> 

</body> 

Answer 1

使用setOptions()到查詢適用於層：

google.maps.event.addDomListener(document.getElementById('store'), 
     'change', 
     function() { 
     var SecondLayerMap = this.value; 
     SecondLayer.setOptions({ 
      query: { 
       select: 'Postcode', 
       from: SecondLayerMap 
      } 
     });