Configuring heatmap overlays using Google Maps API

问题

I'm trying to use the Google Maps API to generate a heatmap of locations. It works, but the result is not very useful, since the parts rendered by the heatmap are small are hard to see:

Nothing in the docs suggest a way to expand the heatmap to render in larger blobs. Is there an undocumented way of doing this or is this just a limitation of the API? Do I just need more data points? I've pasted the code I'm using below.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html {
        height: 100%
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

      #map {
        height: 100%
      }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(44.646959,-63.589697);
        var myOptions = {
          zoom : 14,
          center : myLatlng,
          mapTypeId : google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById('map'), myOptions);

        var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'geometry',
            from: '[ fusion table id removed ]'
          },
          heatmap: { enabled: true }
        });

        layer.setMap(map);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map"></div>
  </body>
</html>

回答1:

Check out maxIntensity. I had a similar issue. maxIntensity combined with radius fixed it.

maxIntensity: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.

回答2:

The heatmap works great for some datasets, and not so well for others. You might be interested in starring one or both of the following feature requests:

http://code.google.com/p/fusion-tables/issues/detail?id=85

http://code.google.com/p/fusion-tables/issues/detail?id=68

回答3:

If you use the Google Maps Javascript API v3 (as opposed to the Fusion Tables API you are currently using) you can set the 'radius' property of your heatmap object to do exactly what you're attempting to do.

Unfortunately, there is no way to do this using the Fusion Tables API. The documentation even mentions this explicitly:

Fusion Table Layer: No ability to customize the appearance of the heatmap.

回答4:

Yes there is.

Check out the code I'm using:

heatmap = new google.maps.visualization.HeatmapLayer({
    dissipating: true,
    map: map,
    radius: 50
});

The radius is measured in meters, so my blobs will be 100 meters in diameter. Let me know if this helps you.

来源：https://stackoverflow.com/questions/7891974/configuring-heatmap-overlays-using-google-maps-api

标签

javascript

google-maps-api-3

overlay

google-fusion-tables

heatmap