热图使用谷歌电子表格中的lat长点

时间:2013-11-17 22:46:41

标签: javascript google-maps google-sheets heatmap

以下是我的Google电子表格的链接,其中包含lat长点:https://docs.google.com/spreadsheet/ccc?key=0Av4n0ReFCN-PdGFISEF0MFRmSDNkTTRlVml2dTJwQ0E#gid=0

我在YouTube上关注了如何在Google电子表格中添加标记的Google开发人员教程:http://www.youtube.com/watch?v=OS2Nj5G9cGs

它奏效了,我能够为我的所有积分添加标记。现在,我需要使用相同的点制作热图。它似乎只在地图上的一个区域附近放了几个点。

编辑代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flickr Data Visualization Map</title>

<style>
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  #map_canvas {
    width: 100%;
    height: 100%;
  }
</style>

<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&sensor=true"></script>

<script>
  // The web service URL from Drive 'Deploy as web app' dialog.
  var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwrkOm22MKwgTvbrtMUtUc6qDwAfnA_rCCua2RGtLRYtUPGwRA/exec?jsonp=callback";

  var map;
  var heatmapData = [ ];

  function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      center: new google.maps.LatLng(37.09024, -95.712891),
      zoom: 3,
      maxZoom: 20,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var scriptElement = document.createElement('script');
    scriptElement.src = DATA_SERVICE_URL;
    document.getElementsByTagName('head')[0].appendChild(scriptElement);
  }

function callback(data) {

    var heatmapData = [ ];

   for ( var i = 0; i < data.length; i++ ) {
    heatmapData.push( new google.maps.LatLng( data[i][0], data[i][1] ) );
}


var heatmap = new google.maps.visualization.HeatmapLayer( {
    data : heatmapData

} );


 }

</script>
</head>

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

  </body>
</html>

1 个答案:

答案 0 :(得分:0)

您的问题就是如何将数据推送到数组:您基本上是在每次迭代时重置数组。请改用.push()

function callback( data ) {
    var headmapData = [];

    for ( var i = 0; i < data.length; i++ ) {
        heatmapData.push( new google.maps.LatLng( data[i][0], data[i][1] ) );
    }

    var heatmap = new google.maps.visualization.HeatmapLayer( {
        data : heatmapData
    } );
}