Question

我想用Google Fusion Tables和Javascript制作热图。 This is what I made so far in 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);

现在我想自定义热图的半径和颜色。 Here's some explanation on the API，但我无法弄清楚应该如何在代码中实现它。谁可以帮助我？

Answer 1

您的链接指向文档的错误部分，可视化库的热图（在客户端上呈现），但您使用的是FusionTableHeatMap（在服务器端呈现），它只有1个选项（您可以选择显示）是不是。）

您可以做什么：从FusionTable请求热图的数据并创建可视化 - HeatMap。当然，如果是这样，它取决于数据量一种可行的方法。

在热图+融合表中自定义半径和颜色

1 个答案: