我正在尝试使用具有两层的 Google Fusion Tables 创建地图,其中一个我想添加样式。我也有多个列,我想使用下拉菜单在这些列之间切换。到目前为止,我设法做到了后者,但我一直在尝试添加第二层。
我现在拥有的地图显示了加纳 170 个地区的学校中女生与男生的比例。通过下拉菜单,我可以在小学和初中之间切换。现在我想添加一个带有区域边界的图层。
在文档中我看到了这个:
您可以使用 Maps API 将最多五个 Fusion Tables 图层添加到地图中,其中一个可以使用最多五个样式规则设置样式。
这几乎正是我想要的,但我也保留了下拉菜单。我最近开始使用 Fusion Tables,希望有人能帮助我。
我要添加的层的ID:1_0rcifQnnNpLV1VjTPyzDZSF3LHp-7rowzrXM78
以及工作地图的代码:
PS:我是一个完全的新手,并以卫报制作的这张地图为基础。我摆脱了所有我认为不需要的东西,但代码中可能还剩下一些不必要的东西。
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/Article">
<head>
<title>Gender Parity Index | Education | 2011</title>
<meta charset="utf-8" />
<style type="text/css">
body { font-family: Arial, sans-serif; }
#map_canvas { height: 600px; width:575px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" id="script">
var center = new google.maps.LatLng(7.972198, -0.716284);
var zoom = 7;
var legend_width = '150px';
var tableid = '12GLQaH4wvwByxBk4W7UHkJTr99vsxymCTYHmkXs';
var location_column = 'geometry';
var colors = ['#CA0020','#F4A582','#F7F7F7','#92C5DE','#0571B0'];
var columns = {
'Gender parity index at primary education': [
{
'min': 0.6,
'max': 0.8,
'color': '#CA0020'
},
{
'min': 0.8,
'max': 0.95,
'color': '#F4A582'
},
{
'min': 0.95,
'max': 1.05,
'color': '#F7F7F7'
},
{
'min': 1.05,
'max': 1.2,
'color': '#92C5DE'
}
],
'Gender parity index at junior high school education': [
{
'min': 0.6,
'max': 0.8,
'color': '#CA0020'
},
{
'min': 0.8,
'max': 0.95,
'color': '#F4A582'
},
{
'min': 0.95,
'max': 1.05,
'color': '#F7F7F7'
},
{
'min': 1.05,
'max': 1.2,
'color': '#92C5DE'
},
{
'min': 1.2,
'max': 1.6,
'color': '#0571B0'
}
]
}
var map, layer, geocoder;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var style = [ { stylers: [ { invert_lightness: true } ] },{ featureType: "road.highway", stylers: [ { hue: "#00e5ff" } ] },{ featureType: "poi.park", stylers: [ { visibility: "off" } ] },{ featureType: "landscape.natural", stylers: [ { visibility: "on" } ] },{ featureType: "water", stylers: [ { color: "#080808" } ] },{ featureType: "landscape.natural", stylers: [ { color: "#202020" } ] },{ featureType: "administrative.province", elementType: "labels", stylers: [ { visibility: "on" } ] },{ featureType: "administrative.locality", elementType: "labels", stylers: [ { visibility: "on" } ] },{ featureType: "administrative.country", elementType: "labels", stylers: [ { visibility: "off" } ] },{
featureType: 'road',
elementType: 'all',
stylers: [
{ saturation: -99 }
]
} ];
geocoder = new google.maps.Geocoder();
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer = new google.maps.FusionTablesLayer({
query: {
select: location_column,
from: tableid
}
});
layer.setMap(map);
init_selectmenu();
addStyle(getKey());
}
function getKey() {
for(key in columns) {
return key;
}
}
// Initialize the drop-down menu
function init_selectmenu() {
var selectmenu = document.getElementById('selector');
for(column in columns) {
var option = document.createElement('option');
option.setAttribute('value', column);
option.innerHTML = column;
selectmenu.appendChild(option);
}
}
function addStyle(column) {
var defined_styles = columns[column];
var styles = new Array();
for(defined_style in defined_styles) {
var style = defined_styles[defined_style];
styles.push({
where: generateWhere(column, style.min, style.max),
polygonOptions: {
fillColor: style.color,
fillOpacity: 0.9,
strokeOpacity: 0.50,
strokeColor: "#f3f3f3"
}
});
}
layer.set('styles', styles);
updateLegend(column);
}
// Create the where clause
function generateWhere(column_name, low, high) {
var whereClause = new Array();
whereClause.push("'");
whereClause.push(column_name);
whereClause.push("' >= ");
whereClause.push(low);
whereClause.push(" AND '");
whereClause.push(column_name);
whereClause.push("' < ");
whereClause.push(high);
return whereClause.join('');
}
// Create the legend with the corresponding colors
function updateLegend(column) {
var legendDiv = document.createElement('div');
var legend = new Legend(legendDiv, column);
legendDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].pop();
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legendDiv);
}
// Generate the content for the legend
function Legend(controlDiv, column) {
controlDiv.style.padding = '10px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.width = legend_width;
controlUI.title = 'Legend';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = legendContent(column);
controlUI.appendChild(controlText);
}
function legendContent(column) {
var defined_styles = columns[column];
// Generate the content for the legend using colors from object
var controlTextList = new Array();
controlTextList.push('<p><b>');
controlTextList.push(column);
controlTextList.push('</b></p>');
for(defined_style in defined_styles) {
var style = defined_styles[defined_style];
controlTextList.push('<div style="background-color: ');
controlTextList.push(style.color);
controlTextList.push('; height: 20px; width: 20px; margin: 3px; float: left;"></div>');
controlTextList.push(style.min);
controlTextList.push(' to ');
controlTextList.push(style.max);
controlTextList.push('<br style="clear: both;"/>');
}
controlTextList.push('<br />');
return controlTextList.join('');
}
</script>
</head>
<body onload="initialize();">
<select onchange="addStyle(this.value);" id="selector" style="font-size: 16px"></select>
<div id="map_canvas"></div>
</div>
<script>
// send the query string to the iFrame
(function() {
var interactive = jQ('#interactive iframe');
if (interactive.length > 0) {
var qs = window.location.search;
interactive[0].src = interactive[0].src + qs;
}
})();
</script>
</div>
<div id="related">
</script>
</script>
</body>
</html>