Question

我有一个改进的融合表映射样本，其代码如下。

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

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

Answer 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/

融合表映射的动态图例

1 个答案: