0


我对 fusion table 和 google-maps API 很陌生。我正在研究 Microsoft 提供的出租车数据集。
数据格式的类型

taxi_id, timestamp, longitude, latitude

这些数据是由北京大约 10000 辆出租车在 6 天内收集的。有代表每辆出租车数据的单独文件。作为试运行,我刚刚将出租车文件导入到谷歌融合表中。我的想法是,以北京的纬度经度为中心,并提供一个适当的半径,我画一个圆圈并将该圆圈中的所有点都吞没。

由于我需要绘制只有纬度和经度但没有地址的圆和吞没点(ST_INTERSECT 将地址作为我相信的参数之一),我在谷歌群组中浏览了一下,我可以确定我需要开发 KML对于文件,而不是直接上传文本文件。所以我开发了一个 KML,在其中,我在“Point”标签中包含了经度和纬度。

所以我的融合表包括,

timestamp  id  col2 #col2 is a point type consisting of long, lat pair

我可以玩弄一下,然后编写一个 javascript 来绘制一个圆圈并在其中吞没点。脚本如下。

<!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>

现在,我想在网页上的那个圆圈中打印点的 ID。请注意,圆的半径会不断变化,因为我已经给出了一个下拉菜单,这意味着我要显示的文本也会发生变化。我该怎么做呢?现在,我已经在融合表中导入了一个出租车文件,因此 id 在整个融合表中保持不变。但我将对几个出租车文件进行一些处理,这可能会导致表格合并,因此 id 会有所不同。现在我如何检索该圆圈中的出租车的 ID 并将其显示在网页上?

欢迎任何建议/帮助

谢谢 :)

4

1 回答 1

0

您有 2 个选项:

  1. 使用 GViz(查询限制:500 行)示例(使用表的副本,有点无聊,所有点都有相同的 id)
  2. 使用 Fusion Tables API v1.0示例(使用与上面相同的表副本,所有点都具有相同的 id)

代码示例

于 2013-04-03T15:35:19.437 回答