Google Maps MVCArray 与 Fusion Tables答案

【问题标题】：Google Maps MVCArray With Fusion TablesGoogle Maps MVCArray 与 Fusion Tables
【发布时间】：2013-02-06 02:10:11
【问题描述】：

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

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 Heatmaps吗？
是的，但我正在尝试使用 WeightedLocation 对象。我的目标是创建一个由 Fusion Table 中的数据驱动的加权热图，以便于更新。

标签： arrays google-maps-api-3 google-fusion-tables heatmap

【解决方案1】：

您可以查询 fusionTable 并根据响应为图层创建数据。

示例（使用 jQuery 和 ajax）：

$.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
                                  });
                            }
               });

演示：http://jsfiddle.net/doktormolle/RxMdf/

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

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

【讨论】：

有没有其他方法可以在不使用 ajax 的情况下做到这一点？我很难让它正常工作。您发布的演示很棒，正是我想要的。我尝试使用演示中的相同代码，只用我自己的融合表替换融合表，我似乎无法将任何结果呈现到地图。
你也可以不使用ajax，在服务器端下载数据，然后将数据提供给javascript。当您将演示与您的表一起使用时，您还必须修改列的名称（在演示 Lat、Long、Hits 中）
查看 Molle 博士上方的更新示例。我更新了示例中的 Fusion Table ID 和其他一些选项，但似乎无法渲染热图图层。
2 个问题：1. 列名区分大小写，对于您的表，它们必须是 LAT,LONG,HITS。 2. 您已复制密钥，但这是我的密钥，仅适用于特定引用者，例如我的 jsfiddle 帐户。创建一个自己的 google-maps-account 并使用您自己的密钥。
您是否在 API-console->services 中激活了“Fusion Tables API”服务？