0

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

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

2 回答 2

1

图例标签只允许在字段集标签内。

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

于 2012-06-06T23:27:45.083 回答
1

您的图例确实显示了，至少是文字。您需要添加一些 CSS 样式，例如将背景设置为白色等。有一个很好的示例

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);
于 2012-04-12T13:16:40.927 回答