Javascript 在网页上打印来自融合表的查询数据
我对fusion table和GoogleMapsAPI非常陌生。我正在处理Microsoft提供的出租车数据集。数据格式为Javascript 在网页上打印来自融合表的查询数据,javascript,google-maps,google-maps-api-3,google-fusion-tables,Javascript,Google Maps,Google Maps Api 3,Google Fusion Tables,我对fusion table和GoogleMapsAPI非常陌生。我正在处理Microsoft提供的出租车数据集。数据格式为 taxi_id, timestamp, longitude, latitude 这些数据是由北京大约1万多辆出租车在6天内收集的。有单独的文件表示每辆出租车的数据。作为试运行，我刚刚在google fusion表中导入了一个出租车文件。我的想法是，以北京的经纬度为中心，提供一个合适的半径，我画一个圆圈，并将圆圈中的所有点都包含在内 由于我需要画一个圆圈，并吞没只有经纬度
taxi_id, timestamp, longitude, latitude
timestamp id col2 #col2 is a point type consisting of long, lat pair
<!DOCTYPE html>
<html>
<head>
<title>csv2kml - Google Fusion Tables</title>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 500px;
margin: 0;
padding: 0;
width: 600px;
}
#googft-legend{background-color:#fff;border:1px solid #000;font-family:Arial, sans- serif;font-size:12px;margin:5px;padding:10px 10px 8px;}#googft-legend p{font-weight:bold;margin-top:0;}#googft-legend div{margin-bottom:5px;}.googft-legend-swatch{border:1px solid;float:left;height:12px;margin-right:8px;width:20px;}.googft-legend-range{margin-left:0;}.googft-dot-icon{margin-right:8px;}.googft-paddle-icon{height:24px;left:-8px;margin-right:-8px;position:relative;vertical-align:middle;width:24px;}.googft-legend-source{margin-bottom:0;margin-top:8px;}.googft-legend-source a{color:#666;font-size:11px;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(39.9100, 116.4000),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2",
from: "1D_ZXsYLX20yvYZHBB20_VmSi5haJA5Q65kNML1M",
where: "ST_INTERSECTS(col2, CIRCLE(LATLNG(39.9100, 116.4000), 500))"
},
options: {
styleId: 2,
templateId: 2
}
});
//var lay=layer;
layer.setMap(map);
// Create a map circle object to visually show the radius.
var circle = new google.maps.Circle({
center: new google.maps.LatLng(39.9100, 116.4000),
radius: 500,
map: map,
fillOpacity: 0.2,
strokeOpacity: 0.5,
strokeWeight: 1
});
// Update the radius when the user makes a selection.
google.maps.event.addDomListener(document.getElementById('radius'),
'change', function() {
var meters = parseInt(this.value, 10);
layer.setOptions({
query: {
select: 'col2',
from: "1D_ZXsYLX20yvYZHBB20_VmSi5haJA5Q65kNML1M",
where: 'ST_INTERSECTS(col2, ' +
'CIRCLE(LATLNG(39.9100, 116.4000), ' + meters + '))'
}
});
circle.setRadius(meters);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googft-mapCanvas"></div>
<select id="radius">
<option value="500">500 meters</option>
<option value="1000">1000 meters</option>
<option value="1500">1500 meters</option>
<option value="2000">2000 meters</option>
<option value="2500">2500 meters</option>
</select>
</body>
</html>