0

GoogleFusionTablesとJavascriptを使用してヒートマップを作成したいと思います。これは私がJSfiddleでこれまでに作成したものです。

      function initialize() {

    var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: -99 }
      ]
    },
    {
      featureType: 'road.highway',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'road.arterial',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'road.local',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.country',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.province',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.locality',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.neighborhood',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'poi',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'transit',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];
  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      center: new google.maps.LatLng(52.04843154112624, 5.33935546875),
      zoom: 7,
      mapTypeControl: false,
      streetViewControl: false,
      zoomControl: true,
      panControl: true,
      draggable: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'Latitude'",
      from: '1nQx1w96dl8YNE_LMnA4Npyrapeo6fErmRXRmB9w'
    },
    heatmap: {enabled: true},
    map: map
  });

  }

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

次に、ヒートマップの半径と色をカスタマイズします。ここにAPIの説明がありますが、コードでどのように実装する必要があるのか​​わかりません。誰が私を助けることができますか？

4

1 に答える 1

1

リンクは、ドキュメントの間違った部分、視覚化ライブラリのヒートマップ (クライアント側でレンダリング) を指していますが、オプションが 1 つしかない FusionTableHeatMap (サーバー側でレンダリング) を使用しています (表示するかどうかを選択できます)。 ）。

できること: FusionTable からヒートマップのデータを要求し、代わりに視覚化ヒートマップを作成します。もちろん、これが実行可能なアプローチであるかどうかは、データの量に依存します。

于 2013-01-25T02:02:23.923 に答える