Google Fusion API 和显示所有数据的问题答案

【问题标题】：Google Fusion API and issues with displaying all the dataGoogle Fusion API 和显示所有数据的问题
【发布时间】：2013-11-26 00:59:32
【问题描述】：

我想做的是在科罗拉多州展示葡萄园。它显示自定义图标，它们位于正确的位置；但是，它不会显示所有数据。当超过 50 个点时，仅显示 11 个点。反正有这个吗？

编辑：这也是我的 Google Fusion 表。也许我的格式是错误的？ https://www.google.com/fusiontables/DataSource?docid=1pYFq7mJ1uT4YYZ3LLzY4l7X8njLmZszJt05lucY#rows:id=1

将 Fusion 地图与此进行比较：http://s5.postimg.org/f80q3qhpz/display.png

这是我的 HTML 和 Javascript。

<!DOCTYPE html>

<!--

-->

<html>
<head>
<title>Vineyards in Colorado</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

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

<!-- Google Maps API javascript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- Import the visualization javascript -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<!-- Initialize visualization -->
<script type="text/javascript">
  google.load('visualization', '1', {});
</script>

<script type="text/javascript">

var tableid = 1; //the table id
var map;

/* INITIALIZE - initialize the map and geocoder */

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(39,-105.547222), //the center lat and long
    zoom: 7, //zoom
    mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
  });

  //make gviz request
  setData();

}

/* GVIZ - get data from Fusion Tables */

function setData() {
  //create a viz query to send to Fusion Tables
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + encodeURIComponent("SELECT name, address FROM 1pYFq7mJ1uT4YYZ3LLzY4l7X8njLmZszJt05lucY"));

  //set the callback function that will be called when the query returns
  query.send(getData);
}

//define callback function, this is called when the results are returned
function getData(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();

  //create an array of row values
  for (i = 0; i < numRows; i++) {
    var row = [];
    for (j = 0; j < numCols; j++) {
      row.push(response.getDataTable().getValue(i, j));
    }
    codeAddress(row);
  }
}

/* GEOCODING - geocode data in Fusion Tables, if the data is a String Address */

var geocoder;
var lastWindow;

//geocode the address, and create a new marker and InfoWindow at the geocoded location
function codeAddress(row) {
  geocoder.geocode( { 'address': row[1] }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var coordinate = results[0].geometry.location;

      //create the marker
      var marker = new google.maps.Marker({
          map: map, 
          position: coordinate,
          //this is where the magic happens!
          icon: new google.maps.MarkerImage("http://s5.postimg.org/icgrcg88j/vineyard_2.png")
      });

      //add a click listener to the marker to open an InfoWindow,
      google.maps.event.addListener(marker, 'click', function(event) {
        if(lastWindow) lastWindow.close(); //close the last window if it exists
        lastWindow = new google.maps.InfoWindow( {
          position: coordinate,
          content: row[0] //this is the row data, you can use HTML here for the content
        });
        lastWindow.open(map);
      });
    } 
  });
}


</script>

</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

【问题讨论】：

标签： javascript html google-fusion-tables

【解决方案1】：

您正在对地址进行地理编码，这将遇到 OVER_QUERY_LIMIT 错误（大约 10 个左右）：

添加这样的 else 来查看它们：

if (status == google.maps.GeocoderStatus.OK) {
// .. your code
} else { 
  alert("geocode failed:"+status); 
}

您在表格中有纬度和经度，用它们来显示标记，不要使用地理编码器。

your data with FusionTableLayer

【讨论】：