热图层

1. 概览
2. 加载 Visualization 库
3. 添加加权数据点
4. 自定义热图层

热图层可在客户端呈现热图。

概览

热图是一种可视化效果，用于描绘各地理点的数据强度。启用热图层后，地图上方就会显示一个带颜色的叠层。默认情况下，强度较高的地区会显示为红色，而强度较低的地区会显示为绿色。

Google Maps JavaScript API 既可以通过热图层在客户端呈现热图数据，也可以通过 Fusion Table 在服务器端呈现热图数据。这两种方法之间的一些关键区别包括：

热图层	Fusion Table 层
大量的数据点可能导致性能降低。	数据点增多不会对性能造成什么影响。
通过更改如下选项，能够自定义热图的外观：颜色渐变、数据点半径以及各数据点的强度。	无法自定义热图的外观。
能够控制热图数据是否在较高的缩放级别下消失。	所有热图数据都会在您进行放大时消失。
数据可以通过 HTML 存储、存储在服务器上或者实时计算。数据可在运行时更改。	所有数据都必须存储在 Fusion Table 中。在运行时无法轻易更改数据。

加载 Visualization 库

热图层是 google.maps.visualization 库的一部分，不会默认加载。可视化类是一种独立于主 Google Maps JavaScript API 代码的自包含内容库。要使用此库中包含的功能，必须先在 Maps JavaScript API 引导程序网址中使用 libraries 参数加载该库。

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

添加热图层

要添加热图层，您必须首先新建一个 HeatmapLayer 对象，并以数组或 MVCArray[] 对象的形式为其提供一些地理数据。这些数据可以是 LatLng 对象，也可以是 WeightedLocation 对象。将 HeatmapLayer 对象实例化后，通过调用 setMap() 方法将该对象添加到地图中。

下例向旧金山的地图添加了 14 个数据点。

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

添加加权数据点

热图既可以呈现 LatLng() 和 WeightedLocation 对象中的任一个，也可以呈现这两者的组合。这两个对象都代表地图上的单个数据点，但是 WeightedLocation 对象可让您额外指明该数据点的权重。对数据点加权后，WeightedLocation 会以高于简单 LatLng 对象的强度进行呈现。权重是线性标度，其中每个 LatLng 对象的隐性权重均为 1；添加单个 {location: new google.maps.LatLng(37.782, -122.441), weight: 3} 的 WeightedLocation 与添加三次 google.maps.LatLng(37.782, -122.441) 的效果相同。您可以在单个数组中混用 weightedLocation 与 LatLng 对象。

在执行以下操作时，使用 WeightedLocation 对象代替 LatLng 会很有用：

• 在单个位置添加大量数据。以 1000 的权重呈现单个 WeightedLocation 对象要比呈现 1000 个 LatLng 对象快。
• 根据任意值对您的数据加以强调。例如，您在绘制地震数据时可以使用 LatLng 对象，但在测量各地震的里氏震级时应使用 WeightedLocation。

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

自定义热图层

您可以通过以下热图选项自定义您的热图的呈现方式。如需了解详细信息，请参阅 HeatmapLayerOptions 文档。

• dissipating：指定热图是否在缩放时消失。如果将 dissipating 设为 false，那么影响半径会随着缩放级别而增大，从而确保在任何给定的地理位置保留颜色强度。默认值为 false。
• gradient：热图的颜色渐变，以 CSS 颜色字符串数组的形式指定。支持所有 CSS3 颜色（包括 RGBA），扩展命名的颜色和 HSL(A) 值除外。
• maxIntensity：热图的最大强度。默认情况下，热图颜色根据地图上任意特定像素处点的最大集中程度而动态调节。该属性可让您指定一个固定的最大值。如果您的数据集中包含一些强度偏高的异常值，设置最大强度会很有帮助。
• radius：各个数据点的影响半径，以像素为单位。
• opacity：热图的不透明度，以 0 到 1 之间的数字表示。

下例显示了一些可用的自定义选项。

查看热图层示例