Question

我正在尝试添加一个图例，这是我从Google Fusion Table Layer Builder创建的地图，似乎没有发生任何事情。传奇没有显示。这是示例代码。 Sample Code

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #map-canvas { width:500px; height:400px; }
 </style>
 <script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false">
 </script>
 <script type="text/javascript">
 var map;
 var layerl0;
 function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(0.428462803418747, 37.760009765625),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'geometry'",
      from: 3435376
    },
    map: map
  });
  // Create the legend and display on the map
    var legend = document.createElement('div');
    legend.id = 'legend';
    var content = [];
    content.push('<h3>Legend</h3>');
    content.push('<p><div class="color red"></div>No</p>');
    content.push('<p><div class="color green"></div>Yes</p>');
    content.push('<p>*Data is fictional</p>');
    legend.innerHTML = content.join('');
    legend.index = 1;
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Answer 1

你的传奇确实显示了至少文本。你需要添加一些CSS样式，e..g来设置背景白色等等。

有一个很好的例子

http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/legend_template.html

参见Legend（）和updateLegend（）函数。

更新这真是一个CSS问题。我的更改标有ADDED或CHANGED

var legend = document.createElement('div');
legend.id = 'legend';

// ADDED
legend.style.padding = '10px';
legend.style.backgroundColor = 'white';
legend.style.borderStyle = 'solid';
legend.style.borderWidth = '1px';
legend.style.textAlign = 'left';

var content = [];
content.push('<h3>Legend</h3>');
// CHANGED
//content.push('<p><div class="color red"></div>No</p>');
//content.push('<p><div class="color green"></div>Yes</p>');
content.push('<p style="background-color: #51D950;">No</p>');
content.push('<p style="background-color: #C84939;">Yes</p>');

content.push('<p>*Data is fictional</p>');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

Answer 2

仅在fieldset标记内允许使用图例标记。

http://www.w3schools.com/html5/tag_legend.asp

将图例添加到Google Fusion Table

2 个答案: