Question

所以我在Fusion Tables中创建了一个热图，获得了一个API密钥并将代码复制到Google Earth Network Link添加的链接中。我没有得到生成的热图填充在Google地球中。我已经将分享设置为公开和不公开，但都没有结果。任何人都可以告诉我我缺少哪些步骤来让热图填充到Google地球中？

以下是我获得的代码（XXX＆＃39; d out my API key）

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport"></meta>
<title>Copy of Heat Map - Google Fusion Tables</title>
<style type="text/css">
  html, body, #googft-mapCanvas {
    height: 300px;
    margin: 0;
    padding: 0;
    width: 500px;
  }
</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3&amp;libraries=visualization"></script>

<script type="text/javascript">
  if (window.location.protocol == "file:") {
    alert('This script only works when loaded from a web server,' +
        ' not from a file on your computer.');
  }
  function ftOnLoadClientApi() {
    gapi.client.setApiKey('XxxXxxXxxxXx');
  }
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=ftOnLoadClientApi">
</script>

<script type="text/javascript">
  var map;

  function loadApi() {
    gapi.client.load('fusiontables', 'v1', initialize);
  }

  function initialize() {
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    mapDiv.style.width = isMobile ? '100%' : '500px';
    mapDiv.style.height = isMobile ? '100%' : '300px';
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(28.070831120253633, -82.434892289917),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var query = 'select col2, col1 from 1-6pqmYvsmKGwt9IZcpIxFUmyYwmumoMAtMrE8pMe limit 1000';
    var request = gapi.client.fusiontables.query.sqlGet({ sql: query });
    request.execute(function(response) {
      onDataFetched(response);
    });
  }

  function onDataFetched(response) {
    if (response.error) {
      alert('Unable to fetch data. ' + response.error.message +
          ' (' + response.error.code + ')');
    } else {
      drawHeatmap(extractLocations(response.rows));
    }
  }

  function extractLocations(rows) {
    var locations = [];
    for (var i = 0; i < rows.length; ++i) {
      var row = rows[i];
      if (row[0]) {
        var lat = row[0];
        var lng = row[1];
        if (lat && lng && !isNaN(lat) && !isNaN(lng)) {
          var latLng = new google.maps.LatLng(lat, lng);
          locations.push(latLng);
        }
      }
    }
    return locations;
  }

  function drawHeatmap(locations) {
    var heatmap = new google.maps.visualization.HeatmapLayer({
       dissipating: true,
       gradient: [
         'rgba(102,255,0,0)', 
         'rgba(147,255,0,1)', 
         'rgba(193,255,0,1)', 
         'rgba(238,255,0,1)', 
         'rgba(244,227,0,1)', 
         'rgba(244,227,0,1)', 
         'rgba(249,198,0,1)', 
         'rgba(255,170,0,1)', 
         'rgba(255,113,0,1)', 
         'rgba(255,57,0,1)', 
         'rgba(255,0,0,1)'
       ],
       opacity: 0.49,
       radius: 20,
       data: locations
    });
    heatmap.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', loadApi);
</script>
</head>

<body>
  <div id="googft-mapCanvas"></div>
</body>
</html>

Google地球网络链接与Fusion热图

0 个答案: