如何使用 Google API 代码对我的 Google Fusion Table 进行分层？答案

【问题标题】：How can I layer my Google Fusion Table with Google API code?如何使用 Google API 代码对我的 Google Fusion Table 进行分层？
【发布时间】：2013-12-07 06:51:39
【问题描述】：

我正在尝试将我的融合表分层到 Google 高程图上。我知道我的融合表的 ID，但是当我打开 html 文件时它似乎没有加载。我试图将融合表层放在代码的其他部分，但这似乎把整个事情搞砸了。目前，只有海拔图正在加载。

感谢您的帮助！

到目前为止，我的代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Southern Ontario Ski Resort Elevation Map</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var elevator;
var map;
var infowindow = new google.maps.InfoWindow();
var toronto = new google.maps.LatLng(43.653226, -79.383184);


layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Latitude\'',
      from: '1vYUBXl1TCBYOjuz9hH97rFPmtoVniB2-ytxqmlk'
    }
  });
  layer.setMap(map);

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: toronto,
    mapTypeId: 'terrain'
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  elevator = new google.maps.ElevationService();

  google.maps.event.addListener(map, 'click', getElevation);
}

function getElevation(event) {

  var locations = [];

  var clickedLocation = event.latLng;
  locations.push(clickedLocation);

  var positionalRequest = {
    'locations': locations
  }

  elevator.getElevationForLocations(positionalRequest, function(results, status) {
    if (status == google.maps.ElevationStatus.OK) {

      if (results[0]) {

       infowindow.setContent('The elevation at this point <br>is ' + results[0].elevation + ' meters.');
        infowindow.setPosition(clickedLocation);
        infowindow.open(map);
      } else {
        alert('No results found');
      }
    } else {
      alert('Elevation service failed due to: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

【问题讨论】：

标签： google-fusion-tables

【解决方案1】：

您正在尝试在创建地图之前加载 Fusion Table。这似乎现在有效：

//...
function initialize() {
var elevator;
var map;
var infowindow = new google.maps.InfoWindow();
var toronto = new google.maps.LatLng(43.653226, -79.383184);
  var mapOptions = {
    zoom: 8,
    center: toronto,
    mapTypeId: 'terrain'
  }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Latitude\'',
      from: '1vYUBXl1TCBYOjuz9hH97rFPmtoVniB2-ytxqmlk'
    }
  });
  layer.setMap(map);

  elevator = new google.maps.ElevationService();//...

【讨论】：