在Google Maps API中确定FusionTablesLayer的中心/边界框

时间:2011-12-08 16:58:06

标签: google-maps google-maps-api-3 google-fusion-tables

有什么方法可以确定FusionTablesLayer的中心点吗?我正在考虑使用一些事件来处理图层渲染,但没有任何运气。

谢谢!

1 个答案:

答案 0 :(得分:4)

以下代码显示如何使用Chart Tools API从Fusion Table检索数据,然后使用该数据使地图边界适合Fusion Table中的数据。希望能为您提供有关如何找到中心的一些想法!

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <style type="text/css">
      body { height: 100%; margin: 0px; padding: 10px; }
      #map-canvas { height: 600px; width: 700px; }
    </style>

    <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script>
      google.load('visualization', '1');

      function initialize() {
        var queryText = encodeURIComponent(
            "SELECT Latitude,Longitude FROM 345328");
        var query = new google.visualization.Query(
            'http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

        query.send(function(response) {
          var numRows = response.getDataTable().getNumberOfRows();

          //create the list of lat/long coordinates
          var coordinates = [];
          for(i = 0; i < numRows; i++) {
            var lat = response.getDataTable().getValue(i, 0);
            var lng = response.getDataTable().getValue(i, 1);
            coordinates.push(new google.maps.LatLng(lat, lng));
          }  

          var map = new google.maps.Map(document.getElementById('map-canvas'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < coordinates.length; i++) {
            bounds.extend(coordinates[i]);
          }
          map.fitBounds(bounds);

          var layer = new google.maps.FusionTablesLayer({
            query: {
              select: 'Latitude',
              from: 345328
            }
          });
          layer.setMap(map);
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>