In diesem Tutorial erfahren Sie, wie Sie Heatmap-Kacheln der Pollen API mithilfe von HTML, CSS und JavaScript auf einer Webseite darstellen. Hier sehen Sie die Karte, die Sie mit dieser Anleitung erstellen:
Jetzt starten
Um eine Webseite mit Heatmap-Kacheln der Pollen API zu erstellen, sind diese Schritte erforderlich, die im Folgenden näher beschrieben werden:
- API-Schlüssel anfordern
- Webseite mit HTML erstellen
- Stile mit CSS konfigurieren
- Pollen API-Daten mit JavaScript abrufen
Zum Erstellen Ihrer Webseite benötigen Sie einen Webbrowser, der JavaScript unterstützt. Eine vollständige Liste der unterstützten Browser finden Sie unter Browserunterstützung.
Schritt 1: API-Schlüssel anfordern
In diesem Abschnitt wird erläutert, wie Sie Ihre Anwendung mit Ihrem eigenen API-Schlüssel bei der Pollen API authentifizieren können.
So fordern Sie einen API-Schlüssel an:
Erstellen Sie ein neues Projekt oder wählen Sie ein vorhandenes Projekt aus.
Klicken Sie auf Weiter, um die API und die zugehörigen Dienste zu aktivieren.
Fordern Sie auf der Seite Anmeldedaten einen API-Schlüssel an und legen Sie die Einschränkungen für den API-Schlüssel fest.
Informationen zum Verhindern von Kontingentdiebstahl und zum Sichern Ihres API-Schlüssels finden Sie unter API-Schlüssel verwenden.
Aktivieren Sie die Abrechnung. Weitere Informationen finden Sie unter Nutzung und Abrechnung.
Sie können Ihren API-Schlüssel jetzt verwenden.
Schritt 2: Webseite mit HTML erstellen
Hier ist der Code für eine einfache HTML-Webseite:
<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>Wenn Sie eine Karte auf Ihrer Webseite laden möchten, fügen Sie ein script-Tag mit dem Bootstrap-Ladeprogramm für die Pollen API ein und geben Sie Ihren API-Schlüssel an:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>Schritt 3: Stile mit CSS konfigurieren
Konfigurieren Sie als Nächstes mit CSS die Darstellung der Karte auf Ihrer Webseite.
<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>Sie können auch CSS verwenden, um Schaltflächen zu konfigurieren, auf denen verschiedene Pollen-API-Daten (TREE, GRASS oder WEED) angezeigt werden:
<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>Verwenden Sie ein <div>-Element, um Container für Schaltflächen und die Karte zu erstellen:
<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>Schritt 4: Pollen API-Daten mit JavaScript abrufen
Mit JavaScript können Sie Pollen API-Daten abrufen und auf einer interaktiven Karte anzeigen:
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) {} }
Verwenden Sie schließlich JavaScript, um die Karte zu initialisieren und Pollen-API-Daten basierend auf den ausgewählten Schaltflächen anzuzeigen:
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); }) }