融合表图的动态图例答案

【问题标题】：dynamic legend for fusion table map融合表图的动态图例
【发布时间】：2013-10-11 15:53:14
【问题描述】：

我有一个融合表映射的修改示例，其代码如下。

<!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>

如何向此地图添加动态图例，以便在选择蓝色标记时，图例应仅显示带有名称的蓝色标记，而在选择红色标记时，它将在图例中显示红色标记图标。

【问题讨论】：

标记的颜色信息不足。您的示例仅更改每个标记的颜色，我可以假设您希望根据列的值使用标记颜色（关于使用的表，我会在 delivery-column 上猜测）并想要过滤基于此列的标记？
我需要在地图右下角添加一个图例，显示选择的样式类型。即，如果选择蓝色标记，它应该显示蓝色标记图标等等。
从下拉列表中选择蓝色标记时只有蓝色标记，没有条件显示特定标记（您没有指定任何where子句），因此没有任何动态条件应用动态图例。
@Dr.Molle- 请参阅上面编辑过的代码，其中有两个图例。但我坚持如何在 event.listener 函数中使用它。即，对于选项 1 的选择，应显示第一个图例，反之亦然。
在this fiddle中找到上述代码示例。

标签： google-fusion-tables legend

【解决方案1】：

您必须清除控件（删除所有图例），然后再次添加所需的图例。

右之前

 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/

【讨论】：