熱度圖圖層

1. 總覽
2. 載入視覺程式庫
3. 新增權重式資料點
4. 自訂熱度圖圖層

熱度圖圖層提供用戶端的熱度圖轉譯。

總覽

熱度圖是視覺效果，用來描繪地理點上的資料強度。啟用熱度圖圖層之後，地圖的最上層便會出現一個著色的疊加層。根據預設，強度較高的區域會顯示紅色，強度較低的區域則會顯示成綠色。

Google Maps JavaScript API 可以透過熱度圖圖層在用戶端轉譯熱度圖資料，或透過 Fusion Table 在伺服器端進行轉譯。兩種方法之間的部分主要差異包括：

熱度圖圖層	Fusion Table 圖層
大量資料點可能造成效能降低。	更多的資料點對效能的影響很小。
能夠透過變更某些選項來自訂熱度圖的外觀，例如色彩漸層、資料點的半徑，以及每個資料點的強度。	無法自訂熱度圖的外觀。
能夠控制熱度圖資料在較高縮放層級時是否消散。	所有熱度圖資料在放大時會消散。
資料可以與 HTML 一起儲存、儲存在伺服器上，或即時進行計算。資料可以在執行階段變更。	所有資料必須儲存在 Fusion Table 中。無法輕易在執行階段變更資料。

載入視覺程式庫

熱度圖圖層是 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 之間的數字表示。

下列範例顯示一些可用的自訂選項。

您所在的地區可能無法提供示範應用程式。

檢視熱度圖圖層範例