0

Google Fusion Table Layer Builderから作成した地図の凡例を追加しようとしていますが、何も起こらないようです。凡例は表示されません。これがサンプルコードです。サンプルコード

 <!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の質問です。私の変更は、追加または変更でマークされています

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 に答える