熱視圖圖層可讓您在用戶端算繪熱視圖。
總覽
熱視圖是以視覺效果，呈現地理位置點的資料強度。熱視圖圖層啟用後，地圖上方會顯示一個彩色疊加層。根據預設，資料強度較高的區域會以紅色顯示，強度較低的區域會以綠色顯示。
載入視覺化程式庫
熱視圖圖層是 google.maps.visualization 程式庫的一部分，根據預設不會載入。視覺化類別是獨立程式庫，與主要的 Maps JavaScript API 程式碼不同。如要使用這個程式庫中的功能，請先在 Maps JavaScript API Bootstrap 網址中使用 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。也就是說，加入一個 {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，影響範圍半徑就會隨縮放等級增加，這樣任何特定地理位置上的顏色濃度就能維持不變。預設為 true。gradient：熱視圖的顏色漸層，以 CSS 顏色字串陣列指定。支援所有 CSS3 顏色 (包括 RGBA)，但延伸的具名顏色和 HSL(A) 值除外。maxIntensity：熱視圖的顏色濃度上限。根據預設，系統會根據地圖上任何特定像素點的最高濃度，動態調整熱視圖的顏色。這個屬性可讓您指定固定上限。如果資料集內含幾個濃度異常偏高的離群值，設定濃度上限可能就十分有用。radius：每個資料點的影響範圍半徑，以像素表示。opacity：熱視圖的不透明度，以 0 到 1 之間的數字表示。
以下列舉幾個可用的自訂選項。