融合表格地圖的動態圖例

我有一個修改後的融合表格地圖樣本，其代碼如下。融合表格地圖的動態圖例

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <title>Fusion Tables Layer Example: Dynamic styles and templates</title> 
    <style> 
    body { font-family: Arial, sans-serif; font-size: 12px; } 
    #map-canvas { height: 660px; width: 100%; } 
    #map-canvas img { max-width: none; } 
    #visualization { height: 100%; width: 100%; } 
    #legend1 { width: 200px; background: #FFF;padding: 10px; margin: 5px;font-size: 12px;font-family: Arial, sans-serif;border: 1px solid black;} 
    .color {border: 1px solid;height: 12px;width: 15px; margin-right: 3px;float: left;} 
    .red {background: #C00;} 
    .blue {background: #06C;} 
</style> 
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function initialize() { 
     var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      center: new google.maps.LatLng(37.4, -122.1), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var layer = new google.maps.FusionTablesLayer({ 
      query: { 
      select: 'Address', 
      from: '15UY2pgiz8sRkq37p2TaJd64U7M_2HDVqHT3Quw' 
      }, 
      map: map, 
      styleId: 1, 
      templateId: 1 
     }); 
     var legend1 = document.createElement('div'); 
     legend1.id = 'legend1'; 
     var content1 = []; 
     content1.push('<p><div class="color red"></div>Red markers</p>'); 
     legend1.innerHTML = content1.join(''); 
     legend1.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend1); 
     var legend2 = document.createElement('div'); 
     legend2.id = 'legend1'; 
     var content2 = []; 
     content2.push('<p><div class="color blue"></div>Blue markers</p>'); 
     legend2.innerHTML = content2.join(''); 
     legend2.index = 1; 
     map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend2); 
      google.maps.event.addDomListener(document.getElementById('style'), 
      'change', function() { 
       var selectedStyle = this.value; 
       layer.set('styleId', selectedStyle); 
       var selectedTemplate = this.value; 
       layer.set('templateId', selectedTemplate); 
     }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <div> 
     <label>Select style:</label> 
     <select id="style"> 
     <option value="1">Red</option> 
     <option value="2">Blue</option> 
     </select> 
    </div> 
    </body> 
</html>

我怎樣才能動態傳說添加到這個地圖，以便選擇藍色標記的時候，傳說應該只顯示其名稱的藍色標記，並選擇紅色標記時，它會顯示在傳說中的紅色標記圖標。

來源

2013-10-09 mpsbhat

標記的顏色是沒有足夠的信息。你的例子只改變了每個標記的顏色，我可以假設你想要基於列值的標記顏色（關於我在'delivery'-column上猜測的使用表格）並且想要過濾基於此列的標記？ –

我需要在地圖右下角顯示哪個樣式類型的圖例。即如果選擇藍色標記，則應顯示藍色標記圖標等。 – mpsbhat

當您從下拉列表中選擇藍色標記時，只有藍色標記，沒有條件顯示特定標記（您沒有指定任何where子句），因此沒有任何動態條件來應用動態圖例。 –

您必須清除控件（刪除所有圖例），然後重新添加所需的圖例。

權以前

google.maps.event.addDomListener(document.getElementById('style')[...]

添加以下代碼：

//we need a copy of all legends(nodes), 
//otherwise they wouldn't be accessible when they have been removed 
var clonedArray = map.controls[google.maps.ControlPosition.RIGHT_BOTTOM] 
         .getArray().slice(); 

//observe changes of the styleId 
google.maps.event.addListener(layer,'styleid_changed',function(){ 
    //clear the controls 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].clear(); 
    //add the desired control 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM] 
      .push(clonedArray[this.get('styleId')-1]) 
}); 

//trigger the event to initially have only the legend 
//based on the selected style 
google.maps.event.trigger(layer,'styleid_changed');

演示：http://jsfiddle.net/doktormolle/t3nY6/

來源

2013-10-11 07:53:14

融合表格地圖的動態圖例

回答

相關問題