热图图层可在客户端渲染热图。
概览
热图是一种可视化效果，用于描绘各地理位置点的数据强度。启用热图图层后，地图上方会显示一个彩色叠加层。默认情况下，强度较高的区域会显示为红色，而强度较低的区域会显示为绿色。
加载可视化库
热图图层是 google.maps.visualization 库的一部分，不会默认加载。可视化类是一个独立于 Maps JavaScript API 主代码的自足库。若要使用此库中包含的功能，您必须先在 Maps JavaScript API 引导程序网址中使用 libraries 参数加载该库：
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</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；针对 WeightedLocation 添加一次 {location: new google.maps.LatLng(37.782, -122.441), weight: 3} 与添加三次 google.maps.LatLng(37.782, -122.441) 的效果相同。您可以在单个数组中混用 weightedLocation 和 LatLng 对象。
在以下情况下，使用 WeightedLocation 对象代替 LatLng 会非常有用：
- 在一个位置添加大量数据。渲染一个权重为 1,000 的
WeightedLocation对象比渲染 1,000 个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，影响半径范围会随着缩放级别而增大，这可确保在任何给定的地理位置保留颜色强度。默认值为 true。gradient：热图的颜色渐变，以 CSS 颜色字符串数组的形式指定。系统支持所有 CSS3 颜色（包括 RGBA），扩展的具名颜色和 HSL(A) 值除外。maxIntensity：热图的最大强度。默认情况下，热图颜色根据地图上任意特定像素点的最大集中程度而动态调节。您可以通过该属性指定固定的最大值。如果您的数据集包含一些强度偏高的离群值，设置最大强度会很有帮助。radius：各个数据点的影响半径范围，以像素为单位。opacity：热图的不透明度，以 0 到 1 之间的数字表示。
下面的示例显示了一些可用的自定义选项。