0

おそらく新人の質問ですが、現在、HTMLファイル内のハードコードされた場所を使用してヒートマップレイヤーのHTMLファイルを作成しました。以下は私のコードのサンプルです。私がやろうとしているのは、「heatMapData」をFusionTableのデータに置き換えることです。目標は、FusionTableが更新されるたびにマップが更新されることです。どんな助けでもいただければ幸いです。

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

Dr 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を使用してブラウザーのsame-origin-restrictionsをバイパスする必要があります。
もちろん、サーバー側でもデータをリクエストできます。

ただし、完全なデータ（場所と重量）をクライアントがダウンロードする必要があるため、アプリケーションで使用できるかどうかはデータの量によって異なります。

于 2013-02-21T23:36:55.520 に答える