將傳說添加到Google Fusion Table

我試圖添加一個傳奇t我從Google Fusion Table Layer Builder創建的地圖，而且似乎沒有任何事情發生。傳說不顯示。這裏是示例代碼。 Sample Code 將傳說添加到Google Fusion Table

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

來源

2012-04-12 Leo

您的傳奇確實顯示，以及至少文字。你需要添加一些CSS樣式，e..g設置背景白色等有一個在

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

見圖例（）和updateLegend（）函數一個很好的例子。

UPDATE這真是一個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-12 13:16:40

感謝您的評論埃裏克。雖然我仍然不知道該把代碼放在哪裏。善意協助 – Leo 2012-04-12 16:25:35

如果你在這裏發佈你的代碼會有幫助。編輯你的問題來添加你鏈接的代碼，然後我可以告訴你需要做什麼。 – 2012-04-12 22:08:22

剛剛添加了代碼 – Leo 2012-04-16 08:41:44

圖例標籤字段集標籤內只允許。

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

來源

2012-06-06 23:27:45

將傳說添加到Google Fusion Table

回答

相關問題