这是一张搜索后损坏的 Fusion Tables 地图。在我进行搜索之前,它可以很好地完成所有工作。地图上的点只是不显示(尽管下表中的信息已更新)。
我究竟做错了什么?
//write the map on page load
$(document).ready(function() {
createMap();
});
//ft layer
var layer;
//ft table
var tableid = 4176964;
//map
var map;
//geocoder instance
var geocoder = new google.maps.Geocoder();
//infowindow
var infowindow;
//gviz
var table;
//FT data in gviz object
var datatable;
//center of map
var center = new google.maps.LatLng(52.146973340644735, 4.7021484375);
//default zoom
var zoom = 7;
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: 12,
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,
query: "SELECT Latitude FROM " + tableid,
map: map
});
//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>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
//query FT data for visualization
var queryText = encodeURIComponent("SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM 4176964 ORDER BY 'Datum' ASC");
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
query.send(getData);
}
//write FT data to table
var getData = function(response) {
console.log('getData');
console.log(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);
}
//match table data to map data
function selectHandler() {
//get lat/lng from FT
var selection = table.getSelection();
var Datum = datatable.getValue(selection[0].row, 0);
var Locatie = datatable.getValue(selection[0].row, 1);
var Type = datatable.getValue(selection[0].row, 2);
var Registratie = datatable.getValue(selection[0].row, 3);
var Vliegmaatschappij = datatable.getValue(selection[0].row, 4);
var Slachtoffers = datatable.getValue(selection[0].row, 5);
var Inzittenden = datatable.getValue(selection[0].row, 6);
var Grond = datatable.getValue(selection[0].row, 7);
infoWindowContent = ('<p>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');
}
function changeSearch(dater) {
dater = document.getElementById('newDatum').value;
console.log('dater: ' + dater);
//with a query based on the variables
var sql = "SELECT Datum, Locatie, Type, Registratie, Vliegmaatschappij, Slachtoffers, Inzittenden, Grond FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "' ORDER BY 'Datum' ASC";
var polySql = "SELECT Latitude FROM " + tableid + " WHERE Datum CONTAINS '" + dater + "'";
console.log('SQL: ' + sql);
console.log('Polygon-SQL: ' + polySql);
layer.setOptions({
query: polySql,
map: map
});
var queryText = encodeURIComponent(sql);
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>Op <b>' + e.row['Datum'].value + '</b> storte een ' + e.row['Type'].value + ' van ' + e.row['Vliegmaatschappij'].value +' met registratienummer ' + e.row['Registratie'].value + ' neer bij <b>' + e.row['Locatie'].value + '</b>.<p><p>Hierbij overleden ' + e.row['Slachtoffers'].value + ' van de ' + e.row['Inzittenden'].value + ' inzittenden en ' + e.row['Grond'].value + ' overleden op de grond.<p><p><a href="http://aviation-safety.net/database/record.php?id=' + e.row['ASN'].value + '" target="_blank">Meer informatie op Aviation Safety Network</a>.');
infowindow.setPosition(e.latLng);
map.setCenter(e.latLng);
infowindow.open(map);
});
}
//end function