Google Maps API - 缩放到Fusion表层查询结果

时间：2015-01-08 04:04:48

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

新手到Stack Overflow发布/使用Maps API的新手 - 所以我没有足够的＆＃34;声誉＆＃34;发布超过2个链接

使用访问Fusion Table的Google Maps API（公共设置） -

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

希望将缩放到查询结果到侧边栏菜单生成的图层。已经看过各种各样的例子/尝试从他们的工作作为起点（在这里查看各种帖子）。在我修改/改编的所有情况/不同的例子中，我可以让图层出现并响应各种查询，但不能放大（甚至尝试修改表格以包含像示例一样的列作为测试）

当前示例（在这里的几个主题中提到 - 谢谢geocodezip！）我正在工作

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

继续收到解析错误 - ＆＃34;查询错误：无法解析查询＆＃34; - 非常确定它是关于我如何设置查询的语法...

在Google云端硬盘中使用JEditey（Mac / Chrome） - 示例在我复制时以此方式运行

Javascript文件（单独）： 

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文件 - 也有单独的CSS文件

<!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 个答案:

答案 0 :(得分：3)

列名称区分大小写。

您在查询中使用Latitude和Longitude，但名称是小写的：latitude＆amp; longitude

工作代码段：

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>

相关问题
最新问题