Arrays 谷歌地图MVCArray与融合表_Arrays_Google Maps Api 3_Google Fusion Tables_Heatmap

Arrays 谷歌地图MVCArray与融合表

arrays google-maps-api-3

Arrays 谷歌地图MVCArray与融合表,arrays,google-maps-api-3,google-fusion-tables,heatmap,Arrays,Google Maps Api 3,Google Fusion Tables,Heatmap,可能是一个新手问题，目前我已经使用HTML文件中的硬编码位置创建了一个热图层HTML文件。下面是我的代码示例。我要做的是用融合表中的数据替换“热图数据”。目标是在更新融合表时更新映射。任何帮助都将不胜感激 var heatMapData = [{location: new google.maps.LatLng(42.071523,-72.624257), weight:4.2}, {location: new google.maps.LatLng(42.37

可能是一个新手问题，目前我已经使用HTML文件中的硬编码位置创建了一个热图层HTML文件。下面是我的代码示例。我要做的是用融合表中的数据替换“热图数据”。目标是在更新融合表时更新映射。任何帮助都将不胜感激

var heatMapData = [{location: new google.maps.LatLng(42.071523,-72.624257), weight:4.2},
                   {location: new google.maps.LatLng(42.37686,-72.46914), weight:1.6}
                  ];

      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(38.82, -99.408660),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        pointArray = new google.maps.MVCArray(heatMapData);

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

        heatmap.setMap(map);
      }

使用Molle博士发布的示例站点，当我更改Fusion Table ID引用时，我似乎无法呈现热图（它具有相同的列名：Lat、Long、Hits）。有什么想法吗

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test Map</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">



      <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&.js"></script>


  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 

      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(38.82, -99.408660),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        //query the fusiontable via ajax    
        $.ajax(
                {
                  dataType: 'jsonp',
                  url     : 'https://www.googleapis.com/fusiontables/v1/query',
                  data    : {
                              sql:'SELECT Lat,Long,Hits \
                                   from 1jsYEXL-Bz0dse02Llf9cUquXkU0MqH6JlUyNhLE',
                              key:'AIzaSyCoiF1SlcuQPqoRdbP58ZCi3YrPx4wvMfg'
                            },
                  success:  function(data){
                             var heatMapData=[];
                               //prepare the data
                             $.each(data.rows,function(i,r){
                               heatMapData.push({
                                   location:new google.maps.LatLng(r[0],r[1]),
                                   weight:Number(r[2])
                                 });
                             });
                               //create the weighted heatmap
                              new google.maps.visualization.HeatmapLayer({
                                  data: heatMapData,map:map
                                  });
                            }
               });
      }

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

</script>


</head>
<body>
  <div id="map_canvas" style="height: 800px; width: 1000px;"></div>

</body>


</html>


测试图
//

您可以查询fusionTable并从响应中创建图层数据

示例（使用jQuery和ajax）：

演示：

注意：使用ajax时，必须使用JSONP绕过浏览器的同源限制。
当然，您也可以在服务器端请求数据

但是，它在应用程序中是否可用取决于数据量，因为完整的数据（位置和重量）必须由客户端下载。

您知道也有吗？是的，但我正在尝试使用WeightedLocation对象。我的目标是创建一个由融合表中的数据驱动的加权热图，以便于更新。有没有其他方法可以不用ajax来实现这一点？我很难让它正常工作。你发布的演示非常棒，正是我想要的。我尝试使用演示中的相同代码，只是用我自己的融合表替换融合表，我似乎无法将任何结果呈现到地图上。您也可以不用ajax，在服务器端下载数据，并将数据提供给javascript。当您在表格中使用演示时，还必须修改COL的名称（在演示Lat、Long、Hits中），请参见上面的更新示例Molle博士。我更新了示例中的Fusion Table ID和一些其他选项，但似乎无法渲染热图层。2个问题：1。列名区分大小写，必须是表的

LAT、LONG、HITS

。2.您已经复制了密钥，但这是我的密钥，它只适用于特定的引用者，例如我的JSFIDLE帐户。创建自己的google地图帐户并使用自己的密钥。您是否在API控制台->服务中激活了“Fusion Tables API”服务？

$.ajax(
                {
                  dataType: 'jsonp',
                  url     : 'https://www.googleapis.com/fusiontables/v1/query',
                  data    : {
                              sql:'SELECT Lat,Long,Hits \
                                   from 1LL0eWI89nGxJ17XZDbWKsWahPyzQCAH8MHoAPSk',
                              key:'yourKey'
                            },
                  success:  function(data){
                             var heatMapData=[];
                               //prepare the data
                             $.each(data.rows,function(i,r){
                               heatMapData.push({
                                   location:new google.maps.LatLng(r[0],r[1]),
                                   weight:Number(r[2])
                                 });
                             });
                               //create the weighted heatmap
                              new google.maps.visualization.HeatmapLayer({
                                  data: heatMapData,map:map
                                  });
                            }
               });