Determine center/bounding box of FusionTablesLayer in Google Maps API

早过忘川 提交于 2019-12-04 20:20:51

The following code shows how to retrieve data from a Fusion Table using the Chart Tools API, then use that data to fit the bounds of the map to the data in the Fusion Table. This will hopefully give you some ideas for how to find the center!

<!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>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!