3

これに似たものを作成しようとしていますが、これを機能させるのに問題があります:

https://google-developers.appspot.com/maps/documentation/javascript/examples/layer-heatmap

Fusion Tables には約 35,000 のレコードが保存されており、これを使用してヒートマップを作成します。データセットには、緯度、経度、度数が含まれています。

また、マップ上にマーカーとして表示されるヒートマップの上に別のレイヤーを含めたいと思います (このデータセットは約 600 行のフュージョン テーブルにも格納されています。下のタクシーデータをフュージョン テーブルの座標に置き換えるにはどうすればよいですか?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Heatmap Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script>
      // Adding 500 Data Points
      var map, pointarray, heatmap;

      var taxiData = [
        new google.maps.LatLng(37.782551, -122.445368),
        new google.maps.LatLng(37.782745, -122.444586),
        new google.maps.LatLng(37.782842, -122.443688),
        new google.maps.LatLng(37.782919, -122.442815),
        new google.maps.LatLng(37.782992, -122.442112),
        new google.maps.LatLng(37.783100, -122.441461),
        new google.maps.LatLng(37.783206, -122.440829)
      ];

      function initialize() {
        var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(37.774546, -122.433523),
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };

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

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

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

        heatmap.setMap(map);
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        var gradient = [
          'rgba(0, 255, 255, 0)',
          'rgba(0, 255, 255, 1)',
          'rgba(0, 191, 255, 1)',
          'rgba(0, 127, 255, 1)',
          'rgba(0, 63, 255, 1)',
          'rgba(0, 0, 255, 1)',
          'rgba(0, 0, 223, 1)',
          'rgba(0, 0, 191, 1)',
          'rgba(0, 0, 159, 1)',
          'rgba(0, 0, 127, 1)',
          'rgba(63, 0, 91, 1)',
          'rgba(127, 0, 63, 1)',
          'rgba(191, 0, 31, 1)',
          'rgba(255, 0, 0, 1)'
        ]
        heatmap.setOptions({
          gradient: heatmap.get('gradient') ? null : gradient
        });
      }

      function changeRadius() {
        heatmap.setOptions({radius: heatmap.get('radius') ? null : 20});
      }

      function changeOpacity() {
        heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
      }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="height: 600px; width: 800px;"></div>
    <button onclick="toggleHeatmap()">Toggle Heatmap</button>
    <button onclick="changeGradient()">Change gradient</button>
    <button onclick="changeRadius()">Change radius</button>
    <button onclick="changeOpacity()">Change opacity</button>
  </body>
</html>
4

1 に答える 1

1

フュージョンテーブルの場合、HeatmapLayerを作成するのではなく、次のようにFusionTablesLayerを作成します。

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'LATITUDE',
    from: '0ILwUgu7vj0VSZnVzaW9udGFibGVzOjEzNjcwNQ'
  },
  heatmap: {
    enabled: true
  }
});
layer.setMap(map);

where:クエリにセクションを追加することで、使用するデータを制限できます。

フュージョンテーブルを使用して単純なマーカーでレイヤーを作成するには、そのheatmap: { enabled: true }部分を省略します。

于 2013-02-14T15:16:49.880 に答える