0

我想用 Google Fusion Tables 和 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

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

你可以做什么：从 FusionTable 请求热图的数据，然后创建一个可视化的热图。当然，这取决于数据量是否可行。

于 2013-01-25T02:02:23.923 回答