热图图层

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。
选择平台Android iOS JavaScript
  1. 概览
  2. 加载可视化库
  3. 添加加权数据点
  4. 自定义热图图层

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

概览

热图是一种可视化效果,用于描述各个地理点的数据强度。启用热图图层后,地图顶部会显示彩色叠加层。默认情况下,强度较高的区域会显示为红色,而强度较低的区域会显示为绿色。

加载可视化库

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

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

添加 Heatmap 图层

如需添加热图图层,您必须先创建新的 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);

添加加权数据点

热图可以呈现 LatLngWeightedLocation 对象,或二者的组合。这两个对象都代表地图上的单个数据点,但 WeightedLocation 对象可让您额外指定该数据点的权重。为数据点应用权重后,WeightedLocation 的呈现强度将高于简单的 LatLng 对象。权重是线性比例,其中每个 LatLng 对象具有 1 的隐式权重 - 添加一个 WeightedLocation 作为 {location: new google.maps.LatLng(37.782, -122.441), weight: 3},其效果等同于添加 google.maps.LatLng(37.782, -122.441) 三次。您可以在单个数组中混合使用 weightedLocationLatLng 对象。

在以下情况下,使用 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);

自定义 Heatmap 图层

您可以使用以下热图选项自定义热图的渲染方式。如需了解详情,请参阅 HeatmapLayerOptions 文档。

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

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

查看示例