javascript - Google Maps API - 缩放到 Fusion Table 图层查询结果

Stack Overflow 发帖新手/Maps API 新手 - 所以我没有足够的“声誉”来发帖超过 2 个链接

使用访问 Fusion Table(公共(public)设置)的 Google Maps API -

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

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

当前示例(在此处的多个线程中提到 - 谢谢 geocodezip!)我正在使用

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

不断收到解析错误 - “查询错误:无法解析查询” - 很确定它在我如何设置查询的语法中......

在 Google Drive (Mac/Chrome) 中使用 JEditey - 当我复制它时示例在此基础上运行良好

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>

最佳答案

列名区分大小写。

您在查询中使用 Latitude 和 Longitude，但名称是小写的:latitude 和 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>

关于javascript - Google Maps API - 缩放到 Fusion Table 图层查询结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27832734/

javascript - Google Maps API - 缩放到 Fusion Table 图层查询结果

上一篇：javascript - 如何在 angular.js 中使用 ng-model 获取按钮文本？

下一篇：javascript - 等到异步操作 (firebase) 调用完成后再加载页面