Blogger 上的 Google Fusion Tables 示例答案

【问题标题】：Google Fusion Tables examples on BloggerBlogger 上的 Google Fusion Tables 示例
【发布时间】：2018-08-11 19:03:58
【问题描述】：

我正在我的博客上尝试融合表示例，但地图没有显示。除了我使用自己的地图 API 代码和自己的融合表 ID 之外，这几乎是示例代码的剪切和粘贴。我启用了 fusion table API 并从浏览器进行了查询，以确认我可以读取 fusion table 中的所有数据。

基本上我从这里复制并粘贴代码，它不起作用，所以我认为博主有一些东西

https://developers.google.com/maps/documentation/javascript/examples/layer-fusiontables-heatmap

首先，我尝试使用该代码并稍微更改查询以及我的 API 密钥和融合表 ID，当这不起作用时，我只是将该代码逐字复制并粘贴到博客中的“页面”中，但它没有工作。

有什么帮助吗？

这是我的代码减去我的表 ID 和我的 API 密钥

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables heatmaps</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 47.22155, lng: -76.72791},
      zoom: 3
    });

    var layer = new google.maps.FusionTablesLayer({
      query: {
        select: 'geometry',
        from: 'FOO'
      },
    });

    layer.setMap(map);
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=FOO&callback=initMap">
</script>
</body>
</html>

这是一个简单的 API 程序，我将它放在博客的不同页面中，它运行良好。非常基本但没有融合表。

<!DOCTYPE html>
<html>
<head>
<style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>
</head>
<body>
<h3>La Verendrye</h3>
<div id="map"></div>
<script>
  function initMap() {
    var uluru = {lat: 47.01837498778204, lng: -76.71812826048739};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY-API-CODE&callback=initMap">
</script>
</body>
</html>

【问题讨论】：

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

【解决方案1】：

好的，我一直在做更多调查，现在删除我之前的答案。这绝对是博主内部发生的一些有趣的事情——博主以某种方式干扰。我在没有融合表的简单工作示例和带有融合表的示例之间进行了一些代码比较。我确定我的第一个问题是这个模板：

#map {
    height: 100%;
}

这导致什么都没有显示。如果我将其更改为

#map {
    height: 720px;
}

然后我的地图显示了融合表数据点，但现在的问题是没有显示基础层。我用谷歌搜索了这个问题，找不到太多。

这是我的两个页面，您可以比较。这是我的博主：

http://www.prospector16.com/p/fusion-table-test.html

现在这里是完全相同的代码，但我进入我的 DNS 为该域并将“aws”主机指向我的 Amazon AWS 实例，然后我将完全相同的代码放在那里，它工作正常：

http://aws.prospector16.com/algonquin-campsites.html

事实上，工作版本甚至可以在不将“高度：100%”更改为“高度：720px”的情况下正常工作。高度为 100% 时效果很好

所以这显然是博主方面的事情。有人可以帮忙吗？

【讨论】：