javascript - 修复 Fusion Tables 地图中的非工作搜索字段和表格

Question

我被 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&region=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

score 0 · Accepted Answer

我将您的示例简单化了一点并将其放在 jsFiddle 上：http: //jsfiddle.net/odi86/SdX4h/

你基本上有2个小错误：

第二个选择框的 id 是“NewClub”，但您使用“newClub”访问它，这不起作用，因为document.getElementById()区分大小写
您在函数中生成的 SQL 查询changeSearch()错误

这：

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
   }
});

javascript - 修复 Fusion Tables 地图中的非工作搜索字段和表格

1 回答 1

Related

Reference