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

บทแนะนำนี้จะแสดงวิธีแสดงชิ้นส่วนแผนที่ความหนาแน่นของ 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

  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);
    })
  }