本頁面由 Cloud Translation API 翻譯而成。

在網頁中嵌入熱視圖圖塊

本教學課程說明如何使用 HTML、CSS 和 JavaScript，在網頁中顯示花粉 API 熱度圖磚。下列是您將在本教學課程中建立的地圖：

開始使用

如要使用 Pollen API 熱度圖磚建立網頁，請按照下列步驟操作：

取得 API 金鑰
使用 HTML 建立網頁
使用 CSS 設定樣式
使用 JavaScript 擷取 Pollen API 資料

如要建立網頁，請使用支援 JavaScript 的網路瀏覽器。如要查看支援的瀏覽器完整清單，請參閱「瀏覽器支援」。

步驟 1：取得 API 金鑰

本節說明如何使用您自己的 API 金鑰，向 Pollen API 驗證應用程式。

取得 API 金鑰的步驟如下：

前往 Google Cloud 控制台。
建立或選取所需專案。
按一下「繼續」以啟用 API 和所有相關服務。
在「憑證」頁面上，取得 API 金鑰並設定 API 金鑰限制。

注意： 如果您目前有不受限制的 API 金鑰，或是設有瀏覽器限制的金鑰，可以使用該金鑰。
如要避免配額遭竊及保護 API 金鑰，請參閱「使用 API 金鑰」。
啟用計費功能。詳情請參閱「用量與計費」一文。

現在您可以使用 API 金鑰了。

步驟 2：使用 HTML 建立網頁

以下是基本 HTML 網頁程式碼：

<html>
  <head>
    <title>Pollen heatmaps around the world</title>
    <style>
      /* Configure CSS here. */
    </style>
  </head>
  <body>
    <!-- Add JavaScript functions and button containers here. -->
  </body>
</html>

如要在網頁上載入地圖，請新增 script 標記，其中包含 Pollen API 的 Bootstrap 載入器，並加入您的 API 金鑰：

  <script
    src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
  </script>

步驟 3：使用 CSS 設定樣式

接著，使用 CSS 設定網頁上地圖的外觀。

  <style>
    /*
    * Always set the map height explicitly to define the size of the div element
    * that contains the map.
    */
    #map {
      height: 600px;
    }
    #container{
      position:absolute;
      display:inline-block;
      z-index:10;
      margin-left:50%;
      transform:translateX(-50%);
      bottom:40px;
    }
  </style>

您也可以使用 CSS 設定按鈕，顯示不同的 Pollen API 資料 (TREE、GRASS 或 WEED)：

  <style>
    button{
    width:100px;
    height:34px; 
    /*top:50px;*/
    display:inline-block;
    position:relative;
    text-align:center;
    border:none;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.29);
    color:#FFF;
    font-weight:400;
    border-radius:4px;
    margin-left:4px;
    font-family:"Google Sans","Roboto","Arial";
    line-height:1em;
  }
    #tree{background:#009c1a}
    #grass{background:#22b600}
    #weed{background:#26cc00}
    button:active{background:#999999 !important;}
  </style>

使用 <div> 元素為按鈕和地圖建立容器：

  <div id="container">
        <button type="button" id="tree">TREE</button>
        <button type="button" id="grass">GRASS</button>
        <button type="button" id="weed">WEED</button>
  </div>
  <div id="map"></div>

步驟 4：使用 JavaScript 擷取 Pollen API 資料

使用 JavaScript 擷取 Pollen API 資料，並在互動式地圖上顯示：

  function getNormalizedCoord(coord, zoom) {
    const y = coord.y;
    let x = coord.x;
    // Define the tile range in one direction. The range is dependent on zoom level:
    // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc.
    const tileRange = 1 << zoom;

    // don't repeat across y-axis (vertically)
    if (y < 0 || y >= tileRange) {
      return null;
    }

    // repeat across x-axis
    if (x < 0 || x >= tileRange) {
      x = ((x % tileRange) + tileRange) % tileRange;
    }
    return { x: x, y: y };
  }

  let pollen = "TREE_UPI"
  class PollenMapType {
    tileSize;
    alt = null;
    maxZoom = 16;
    minZoom = 3;
    name = null;
    projection = null;
    radius = 6378137;
    constructor(tileSize) {
      this.tileSize = tileSize;
    }

    getTile(coord, zoom, ownerDocument) {
      const img = ownerDocument.createElement("img");
      const mapType = pollen;
      const normalizedCoord = getNormalizedCoord(coord, zoom);

      const x = coord.x;
      const y = coord.y;
      const key = "YOUR_API_KEY";
      img.style.opacity = 0.8;
      img.src = `https://pollen.googleapis.com/v1/mapTypes/${mapType}/heatmapTiles/${zoom}/${x}/${y}?key=${key}`;
      return img;
    }
    releaseTile(tile) {}
  }

最後，請使用 JavaScript 初始化地圖，並根據所選按鈕顯示 Pollen API 資料：

  function initMap() {
    const myLatLng = { lat: 40.3769, lng: -80.5417 };
    const map = new google.maps.Map(document.getElementById("map"), {
      mapId: "ffcdd6091fa9fb03",
      zoom: 0,
      center: myLatLng,
      maxZoom: 16,
      minZoom: 3,
      restriction: {
        latLngBounds: {north: 80, south: -80, west: -180, east: 180},
        strictBounds: true,
      },
      streetViewControl: false,
    });
    const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
    map.overlayMapTypes.insertAt(0, pollenMapType);
    
    document.querySelector("#tree").addEventListener("click", function(){
        pollen ="TREE_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
    document.querySelector("#grass").addEventListener("click", function(){
        pollen ="GRASS_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
      document.querySelector("#weed").addEventListener("click", function(){
        pollen ="WEED_UPI"
        map.overlayMapTypes.removeAt(0);
        const pollenMapType = new PollenMapType(new google.maps.Size(256, 256));
        map.overlayMapTypes.insertAt(0, pollenMapType);
    })
  }