Google Maps API - Zoom to Fusion Table Layer Query

2019-06-06 04:37发布

站内文章 / JavaScript
23 0 0

问题:

Newbie to Stack Overflow posting/novice with Maps API - so I do not have enough "reputation" to post more than 2 links

Working on a Google Maps API that accesses a Fusion Table (public setting) -

https://www.google.com/fusiontables/DataSource?docid=13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6

Would like it to zoom to the results of a query to the layer generated from a side bar menu. Have seen various examples/experimented with working from them as a starting point (looked at various posts here). In all cases/different examples I have modified/adapted, I can get the layer to appear and respond to the various queries, but not to zoom in(even tried modifying the table to include a column like the example as a test)

Current example (mentioned in several threads here - thank you geocodezip!) I am working from is

http://www.geocodezip.com/www_vciregionmap_comC.html

Keep getting a parsing error - "Error in query: Could not parse query" - pretty sure it is in the syntax on how I am setting up the query ...

Using JEditey in Google Drive (Mac/Chrome) - Example Runs fine on that basis when I copied it over

Javascript file (separate):

var FT_TableID = "13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6"; // 1288005; // 1200417;
// geocoded addresses with the spreadsheet geocoder:
// http://blog.pamelafox.org/2008/11/geocoding-with-google-spreadsheets-and.html 

var layer = null;

function initialize() {
//SET CENTER  
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(20.574814, -174.642222),
      zoom: 2,
      scrollwheel:false,
      mapTypeControl: true,
      streetViewControl: false,
      overviewMapControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
// CONTROLS      
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      mapTypeId: 'roadmap'
    });


// GET DATA    
    layer = new google.maps.FusionTablesLayer({
      query: {
        //Previous select: 'latitude', /* was 'Latitude,Longitude', used to work... */
        select: 'Continent',
        from: FT_TableID
      }
    });
//SET MAP    
    layer.setMap(map);
}
function changeQuery(term) {
  layer.setOptions({query:{select:'Continent', /* was 'Latitude,Longitude', used to work... */
                           from:FT_TableID,
                           //OLd where:"District = "+term
                           where: "'Continent' contains '" + term + "'"
                           }

 });
//alert("query="+term);


// zoom and center map on query results
  //set the query using the parameter
  //var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE Continent contains "+"'"+term+"'");

  var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE 'Continent' contains "+"'"+term+"'");

  //alert(queryText)

  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);
  //alert(query)

  //set the callback function
  query.send(zoomTo);

}

function zoomTo(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  var bounds = new google.maps.LatLngBounds();
  for(i = 0; i < numRows; i++) {
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 0)),
          parseFloat(response.getDataTable().getValue(i, 1)));
      bounds.extend(point);
  }
  alert("bounds =" +bounds)
  // zoom to the bounds
  map.fitBounds(bounds);
}

HTML file: - also have separate CSS file

<!DOCTYPE html> 

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="code.js"></script>

<title>Waterkeeper Locations</title> 

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

<script type="text/javascript">
  google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
</script>

</head> 

<body onload="initialize();"> 

<div id="topBar">
</div>

<header>

<div id="logo">&nbsp;</div>
    <h1>Waterkeeper Locations Map </h1>
</header> 

<div id="wrapperMain">

<div id="zoomControl">

<div class="clear"></div>
</div>                      

<div id="map_canvas" class="map">

</div>
<div id="legend">
<h1> Regions</h1>
    <ul>
        <li><label><a href="javascript:changeQuery('United States');">United States</a></label> </li>
        <li><label><a href="javascript:changeQuery('South America');">South America</a></label> </li>
        <li><label><a href="javascript:changeQuery('Russian');">Russian Federation</a></label> </li>
        <li><label><a href="javascript:changeQuery('Mexico');">Mexico</a></label></li>
        <li><label><a href="javascript:changeQuery('Asia');">Asia</a></label> </li>
        <li><label><a href="javascript:changeQuery('India');">India</a></label></li>
        <li><label><a href="javascript:changeQuery('Europe');">Europe</a></label></li>
        <li><label><a href="javascript:changeQuery('Canada');">Canada</a></label> </li>
        <li><label><a href="javascript:changeQuery('Australia');">Australia</a></label> </li>
        <li><label><a href="javascript:changeQuery('Africa');">Africa</a></label> </li>
    </ul>

</div>

</div>

</body> 
</html>

回答1:

column-names are case-sensitive.

You use Latitude and Longitude inside the query, but the names are lowercase: latitude & longitude

Working code snippet:

google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
var FT_TableID = "13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6"; // 1288005; // 1200417;
// geocoded addresses with the spreadsheet geocoder:
// http://blog.pamelafox.org/2008/11/geocoding-with-google-spreadsheets-and.html 

var layer = null;

function initialize() {
  //SET CENTER  
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(20.574814, -174.642222),
    zoom: 2,
    scrollwheel: false,
    mapTypeControl: true,
    streetViewControl: false,
    overviewMapControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    // CONTROLS      
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    mapTypeId: 'roadmap'
  });


  // GET DATA    
  layer = new google.maps.FusionTablesLayer({
    query: {
      //Previous select: 'latitude', /* was 'Latitude,Longitude', used to work... */
      select: 'Continent',
      from: FT_TableID
    }
  });
  //SET MAP    
  layer.setMap(map);
}

function changeQuery(term) {
  layer.setOptions({
    query: {
      select: 'Continent',
      /* was 'Latitude,Longitude', used to work... */
      from: FT_TableID,
      //OLd where:"District = "+term
      where: "'Continent' contains '" + term + "'"
    }

  });
  //alert("query="+term);


  // zoom and center map on query results
  //set the query using the parameter
  //var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE Continent contains "+"'"+term+"'");

  var queryText = encodeURIComponent("SELECT 'latitude', 'longitude' FROM " + FT_TableID + " WHERE 'Continent' contains " + "'" + term + "'");

  //alert(queryText)

  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
  //alert(query)

  //set the callback function
  query.send(zoomTo);

}

function zoomTo(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  var bounds = new google.maps.LatLngBounds();
  var numResults = 0;
  for (i = 0; i < numRows; i++) {
    if (!isNaN(parseFloat(response.getDataTable().getValue(i, 0))) && !isNaN(parseFloat(response.getDataTable().getValue(i, 1)))) {
      var point = new google.maps.LatLng(
        parseFloat(response.getDataTable().getValue(i, 0)),
        parseFloat(response.getDataTable().getValue(i, 1)));
      numResults++;
      bounds.extend(point);
    }
  }
  // alert("bounds =" +bounds)
  // zoom to the bounds
  if (numResults > 1) map.fitBounds(bounds);
  else if (numResults == 1) map.setCenter(point);
  else alert("no results");

}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="topBar">
</div>

<header>

  <div id="logo">&nbsp;</div>
  <h1>Waterkeeper Locations Map </h1>
</header>

<div id="wrapperMain">

  <div id="zoomControl">

    <div class="clear"></div>
  </div>

  <div id="map_canvas" class="map" style="height:500px; width:500px;">

  </div>
  <div id="legend">
    <h1> Regions</h1>
    <ul>
      <li>
        <label><a href="javascript:changeQuery('United States');">United States</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('South America');">South America</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Russian');">Russian Federation</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Mexico');">Mexico</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Asia');">Asia</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('India');">India</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Europe');">Europe</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Canada');">Canada</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Australia');">Australia</a>
        </label>
      </li>
      <li>
        <label><a href="javascript:changeQuery('Africa');">Africa</a>
        </label>
      </li>
    </ul>

  </div>

</div>



标签： javascript google-maps google-maps-api-3 google-fusion-tables
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~