0

可能是一个菜鸟问题，目前我已经使用我的 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>
4

1 回答 1

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 来绕过浏览器的同源限制。
当然，您也可以在服务器端请求数据。

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

于 2013-02-21T23:36:55.520 回答