在网页中嵌入热图图块

本教程介绍了如何使用 HTML、CSS 和 JavaScript 在网页中显示 Pollen API 热图图块。您将使用本教程创建的地图如下所示：

开始使用

以下是使用 Pollen API 热图图块创建网页的步骤：

  1. 获取 API 密钥
  2. 使用 HTML 创建网页
  3. 使用 CSS 配置样式
  4. 使用 JavaScript 提取 Pollen API 数据

要创建网页，您需要支持 JavaScript 的网络浏览器。如需查看受支持浏览器的完整列表，请参阅浏览器支持。

第 1 步：获取 API 密钥

本部分介绍如何使用您自己的 API 密钥向 Pollen API 验证应用的身份。

请按照下列步骤获取 API 密钥：

  1. 前往 Google Cloud 控制台。

  2. 创建或选择一个项目。

  3. 点击继续，启用 API 和任何相关服务。

  4. 在凭据页面上，获取 API 密钥并设置 API 密钥限制。

  5. 如需防止配额盗用并保护 API 密钥，请参阅使用 API 密钥。

  6. 启用结算功能。如需了解详情，请参阅用量和结算。

现在，您就可以使用 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>

如需在网页上加载地图，请添加包含 Pollen API 引导加载程序的 script 标记，并在标记中添加您的 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);
    })
  }