0

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

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

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

4

1 回答 1

2

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

就在之前 

 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-11T07:53:14.970 回答