ฝังชิ้นส่วนแผนที่ความหนาแน่นในหน้าเว็บ

บทแนะนำนี้จะแสดงวิธีแสดงไทล์ฮีตแมปของ Pollen API ในหน้าเว็บโดยใช้ HTML, CSS และ JavaScript นี่คือแผนที่ที่คุณจะสร้างโดยใช้บทแนะนำนี้

เริ่มต้นใช้งาน

ขั้นตอนที่เราจะกล่าวถึงในการสร้างหน้าเว็บที่มีแผนที่ความร้อนของ Pollen API มีดังนี้

  1. รับคีย์ API
  2. สร้างหน้าเว็บโดยใช้ HTML
  3. กำหนดค่ารูปแบบโดยใช้ CSS
  4. ดึงข้อมูล Pollen API โดยใช้ JavaScript

หากต้องการสร้างหน้าเว็บ คุณจะต้องมีเว็บเบราว์เซอร์ที่รองรับ JavaScript ดูรายการเบราว์เซอร์ทั้งหมดที่รองรับได้ที่การรองรับเบราว์เซอร์

ขั้นตอนที่ 1: รับคีย์ API

ส่วนนี้อธิบายวิธีตรวจสอบสิทธิ์แอปกับ Pollen API โดยใช้คีย์ API ของคุณเอง

ทำตามขั้นตอนต่อไปนี้เพื่อรับคีย์ API

  1. ไปที่ Google Cloud Console

  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>

หากต้องการโหลดแผนที่ในหน้าเว็บ ให้เพิ่มแท็ก script ที่มีโปรแกรมโหลด Bootstrap สำหรับ Pollen API และใส่คีย์ 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: ดึงข้อมูล Pollen API โดยใช้ JavaScript

ใช้ 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);
    })
  }