<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB-b8aFHZ7a8tICmAbPEhQgQ2Uvf8t1zg&libraries=visualization,places&sensor=false"></script>
<script src="https://www.google.com/fusiontables/DataSource?docid=16IJZkJaz4jlZZnZYsiQEG4POvB0eHBEfuVFGWb3m"></script>
<style type="text/css">
html {height:100%}
body {height: 100%; margin:500;padding:0}
#title {height:80px; margin-top:20px; }
#options{height:50px;}
#time1{width:95px}
#time2{width:95px}
#googleMap{margin-left:325px; margin-top:50px; width: 950px; height: 800px}
#type-selector {color: #fff;background-color: #4d90fe;padding: 5px 11px 0px 11px;}
#type-selector label {font-family: Roboto;font-size: 13px;font-weight: 300;}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
</style>
</head>
<body>
<script type="text/javascript">
var map; //global variable so can be used by all functions to update the map
var tableid='16IJZkJaz4jlZZnZYsiQEG4POvB0eHBEfuVFGWb3m'; //fusion tableid to access the database table
function initialize(){
google.maps.visualRefresh = true;
var mapProp = {
center: new google.maps.LatLng(19.119118,73.048439),
zoom:11,
scaleControl: true,
streetViewControl:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//create a new map in div element
map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//add bounds to display search results within mumbai
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(19.300572, 72.768631),
new google.maps.LatLng(18.975029, 73.186455));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input =(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox((input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
var markers = [];
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// Bias the SearchBox results towards places that are within the bounds of the current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
} //end of initialize
var i=0;
function allmarks(opt)
{
switch(opt)
{
case "None":
document.getElementById("Timerange").style.display = "none";
document.getElementById("Raterange").style.display = "none";
initialize();
break;
case "All":
document.getElementById("Timerange").style.display = "none";
document.getElementById("Raterange").style.display = "none";
while (i!=0){layer.setMap(null);i--;}
layer = new google.maps.FusionTablesLayer({
query: {select: 'Latitude',
from: tableid}});
layer.setMap(map);
i++;
break;
case "Time" : document.getElementById("Timerange").style.display = "block";
document.getElementById("Raterange").style.display = "none";
layer.setMap(null);
break;
case "Rating" : document.getElementById("Raterange").style.display = "block";
document.getElementById("Timerange").style.display = "none";
layer.setMap(null);
break;
} //end of switch
} //end of allmarks
function timefunc()
{ //function to retrive the input values and fire query on fusion table
var x = document.getElementById("time1").value;
var y = document.getElementById("time2").value;
var whereClause = 'Time >'+x+' AND Time<='+y;
alert(whereClause);
while (i!=0){layer.setMap(null);i--;}
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude,Longitude,Time,Rating',
from: tableid,
where: whereClause
}
});
layer.setMap(map);
i++;
}
function ratefunc()
{ //function to retrive the input values and fire query on fusion table
var k = document.getElementById("rate1").value;
var l = document.getElementById("rate2").value;
var a=1;
var b=5;
while (i!=0){layer.setMap(null);i--;}
if(k>5||l>5)
{alert("Please enter a value between 1 and 5");}
if(k>l)
{alert("Please enter a valid range");}
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude,Longitude,Time,Rating',
from: tableid,
where:"Rating >"+k+" AND Rating <="+l
}
});
layer.setMap(map);
i++; }
</script>
<body onload="initialize()">
<div id="title"><h1><center> Visualisation of Parking Requests</center></h1> </div>
<div id="options">
<form>
<h3 align="center">Display:
<select name="sortby" onChange="allmarks(this.value)">
<option id="None" value="None">None</option>
<option id="All" value="All" >All</option>
<option id="Time" value="Time">Time</option>
<option id="Rating" value="Rating">Rating</option>
</select>
<div id="Timerange" style="display:none">
Enter a Time range: <input id="time1" type="time" name="time1">
to : <input id="time2" type="time" name="time2">
<input type="button" name="submit" value="Submit" onclick="timefunc()"/>
</div>
<div id="Raterange" style="display:none">
Enter a Rating range : <input id="rate1" type="number" name="rating1" min="0" max="5" step="0.1" value="1">
to : <input id="rate2" type="number" name="rating2" min="0" max="5" step="0.1" value="5">
<input type="button" name="submit1" value="Submit" onclick="ratefunc()"/>
</div>
</h3></form></div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="googleMap"></div>
</body>
</html>
我正在开发一个简单的html程序，它有一个下拉菜单，其中包含选项None，All，Time和Rating。我正在使用具有随机生成值的列的Google融合表。列是Cid，纬度，经度，时间和等级。
当我选择'全部'时。 Google融合表中的所有点都显示在地图上，当我选择“评级”时，我可以输入特定的值范围，然后使用这些约束进行查询。当我尝试用'时间'做同样的事情时，我遇到了问题。在函数'timefunc（）'中，查询的where子句无法正确执行。我在执行过滤后尝试使用Fusion表的发布选项但没有帮助。
我如何克服这个问题？我需要它来显示用户在输入框中输入的时间，但我似乎无法构造它将运行的适当查询并显示正确的结果。
答案 0 :(得分：0)
我在文档中没有找到有关它的详细信息，但是因为它似乎必须明确地将值作为字符串传递：
var whereClause = "Time >'"+x+"' AND Time<='"+y+"'";
注意：您必须在输入字段
中使用格式hh:ss
答案 1 :(得分：0)
我发现这个问题的另一个解决方案是分割输入，这样13:30就会被分成13,30并存储到一个数组中。融合表还需要有单独的列，例如小时，分钟，然后我们单独查询它们。这是更新的timefunc（） -
注意：我使用的融合表不同，新的融合表ID是 - ＆＃39; 17rCPfwugHVJrCbEHGKNOp21e7UsVQxjubUhRZSch＆＃39;它存储在名为tableid1的变量中。
function timefunc()
{
var x = document.getElementById("time1").value;
var y = document.getElementById("time2").value;
var ax=x.split(":");
var by=y.split(":");
var whereClause = 'hour >='+ax[0]+' AND hour <='+by[0]+' AND minute >='+ax[1]+' AND minute <='+by[1];
while (i!=0){layer.setMap(null);i--;}
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Latitude',
from: tableid1,
where: whereClause
}
});
layer.setMap(map);
i++;
}