我坚持使用Github的一段经过调整的代码。 [来源] [https://github.com/chrislkeller/failed-us-banks-since-2000]是关于美国银行倒闭的优秀地图。 [这里的实例] [http://www.projects.chrislkeller.com/failed-us-banks-since-2000/]。
我想和2012年欧洲杯上的所有球员一起制作一张地图。[这是现场的例子] [http://www.jerryvermanen.nl/ekkaart/index.html]我走了多远。
我在这张地图上有两个主要问题(忽略了信息窗口,它仍然错过了特定比赛中玩家数量的额外字段。 - 我的搜索字段不起作用。为什么?代码中的哪些调整可以解决此问题? - 如果我点击我的桌子,它就不会参加比赛(比赛组织所在国家的KML)。同样,为什么它不起作用,我怎样才能使它发挥作用?
检查我的代码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- begin meta -->
<title>Selecties EK 2012</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="keywords" content="Ek 2012, voetbal, selecties" />
<meta name="description" content=">Vind alle spelers die naar het EK voetbal 2012 gaan op land van herkomst en club." />
<!-- end meta -->
<!-- begin css -->
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<!-- end header -->
<!-- begin body -->
<body onload="initialize()">
<!-- begin map container -->
<div id="map-container">
<!-- begin action bar -->
<div id ="map-action-bar">
</div>
<!-- end action bar -->
<!-- begin map -->
<div id="map_canvas"></div>
<!-- end map -->
<!--begin map explainer -->
<div id="map-explainer">
<h1>Selecties EK 2012</h1>
<p>Op ... juni begint het EK voetbal 2012. De 24 deelnemende landen strijden voor een plek in de finale op ... juli, om vervolgens tot Europees Kampioen gekroond te worden.</p>
<p>Op welke spelers staan de schijnwerpers tijdens deze voetbalmaand? En welke competities leveren de meeste EK-gangers af?</p>
<!-- begin credits -->
<div id="smalltype">
<p>Gemaakt door <a href="http://twitter.com/#!/JerryVermanen" target="_blank">Jerry Vermanen.</a>
<p>Code via <a href="http://twitter.com/#!/ChrisLKeller" target="_blank">Chris Keller.</a></br>
<a href="www.jerryvermanen.nl" target="_blank">Download de data</a><br />
<a href="https://github.com/chrislkeller/failed-us-banks-since-2000" target="_blank">Code op GitHub</a>
</p>
</div>
<!-- end credits -->
</div>
<!-- end map explainer -->
<!-- begin table -->
<div id="visualization"></div>
<!-- end table -->
</div>
<!-- end map container -->
</body>
<!-- end body -->
<!-- scripts -->
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false®ion=us"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="scripts/ek2012.js"></script>
<!-- end scripts -->
<!-- begin analytics code -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setaccount', '']);
_gaq.push(['_setdomainname', '']);
_gaq.push(['_trackpageview']);
(function() {
var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s);
})();
</script>
<!-- end analytics code -->
</html>
<!-- end document -->
和js文件
//write the map on page load
$(document).ready(function() {
createMap();
});
//select menu - out-thought myself with this one and couldn't create dynamically
var searchVariables = '<select id="newComp">' +
'<option value="">Alle competities</option>' +
'<option value="Belgische competitie">Belgische competitie</option>' +
'<option value="Bundesliga">Bundesliga</option>' +
'<option value="Championship">Championship</option>' +
'</select>' +
'<select id="NewClub">' +
'<option value="">Alle EK-landen</option>' +
'<option value="ZWE">ZWE</option>' +
'<option value="IER">IER</option>' +
'</select>' +
'<input type="button" class="mapActionButton" value="Search" id="searchBanks" onclick="changeSearch()"/>' +
'<input type="button" class="mapActionButton" value="Reset Map" onClick="window.location.href=window.location.href" />';
//ft layer
var layer;
//ft table
var tableid = 3976074;
//map
var map;
//geocoder instance
var geocoder = new google.maps.Geocoder();
//gviz
var table;
//FT data in gviz object
var datatable;
//infowindow
var infowindow;
//center of map
var center = new google.maps.LatLng(40,0);
//default zoom
var zoom = 1;
google.load('visualization', '1', {'packages':['table']});
function createMap() {
//map options
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: zoom,
minZoom: 2,
maxZoom: 6,
scrollwheel: true,
disableDragging: true,
mapTypeControl: false,
navigationControl: true,
streetViewControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP}
});
//intial fusion layer & supress fusion info window
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows: true});
layer.setQuery("SELECT Location FROM " + tableid);
layer.setMap(map);
//writes the select menus to the search bar
document.getElementById('map-action-bar').innerHTML = searchVariables;
//adds click listener on layer
google.maps.event.addListener(layer, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
//write FT data to info window
text = infowindow.setContent(
'<p>De ' + e.row['Competitie'].value +
' levert ' + e.row['Speler'].value +
' internationals.'
);
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
//query FT data for visualization
var queryText = encodeURIComponent("SELECT Speler, Competitie, Land, Club FROM 3976074 ORDER BY Speler ASC");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
//write FT data to table
function getData(response) {
table = new google.visualization.Table(document.getElementById('visualization'));
datatable = response.getDataTable();
table.draw(datatable, {showRowNumber: true});
//add table listener when row clicked
google.visualization.events.addListener(table, 'select', selectHandler);
}
//end function
//match table data to map data
function selectHandler() {
//get lat/lng from FT
var selection = table.getSelection();
var Competitie = datatable.getValue(selection[0].row, 0);
var Club = datatable.getValue(selection[0].row, 1);
var Speler = datatable.getValue(selection[0].row, 2);
var Land = datatable.getValue(selection[0].row, 3);
infoWindowContent = (
'<p>De ' + e.row['Competitie'].value +
' levert ' + e.row['Speler'].value +
' internationals.'
);
}
/* search function based on user's selection
that I wrote longhand, though there must
be some kind of shortcut because I'm basically
rewriting the main function again? */
function changeSearch(comper, cluber) {
if(infowindow) infowindow.close();
layer.setMap();
//assigns select menu values to variables
comper = document.getElementById('newComp').value;
cluber = document.getElementById('newClub').value;
//sets new layer to map
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows: true});
//with a query based on the variables
layer.setQuery("SELECT Location FROM " + tableid + " WHERE Competitie CONTAINS '" + comper + "' AND Land CONTAINS '" + cluber);
//and sets the map
layer.setMap(map);
/* here we build the table again but based on the variables from the menu values */
var queryText = encodeURIComponent("SELECT Speler, Competitie, Land, Club" + tableid + " WHERE Competitie CONTAINS '" + comper + "' AND Land CONTAINS '" + cluber + "' ORDER BY 'Speler' ASC");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
//adds a click listener on search layer
google.maps.event.addListener(layer, 'click', function(e) {
if(infowindow) infowindow.close();
else infowindow = new google.maps.InfoWindow();
//writes the info window on search layer
infowindow.setContent(
'<p>De ' + e.row['Competitie'].value +
' levert ' + e.row['Speler'].value +
' internationals.'
);
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
}
//end function
[1]: https://github.com/chrislkeller/failed-us-banks-since-2000
[2]: http://www.projects.chrislkeller.com/failed-us-banks-since-2000/
[3]: http://www.jerryvermanen.nl/ekkaart/index.html
答案 0 :(得分:0)
我简单地简化了你的例子并把它放在jsFiddle上:http://jsfiddle.net/odi86/SdX4h/
你基本上有2个小错误:
document.getElementById()
区分大小写changeSearch()
函数中生成的SQL查询错误此:
var queryText = encodeURIComponent("SELECT Speler, Competitie, Land, Club" + tableid + " WHERE Competitie CONTAINS '" + comper + "' AND Land CONTAINS '" + cluber + "' ORDER BY 'Speler' ASC");
应该是:
var queryText = encodeURIComponent("SELECT Speler, Competitie, Land, Club FROM " + tableid + " WHERE Competitie CONTAINS '" + comper + "' AND Land CONTAINS '" + cluber + "' ORDER BY 'Speler' ASC");
每次更改搜索值时都没有必要重新创建FusionTablesLayer,您可以使用以下语法(这也可以防止您出现上述SQL错误):
var fields = "Speler, Competitie, Land, Club";
var tableId = 3976074;
var whereClause = "Competitie CONTAINS '" + comper + "' AND Land CONTAINS '" + cluber + "'";
layer.setOptions({
query: {
select: fields,
from: tableId,
where: whereClause
}
});