Z tego samouczka dowiesz się, jak wyświetlać kafelki mapy termicznej interfejsu Pollen API na stronie za pomocą kodu HTML, CSS i JavaScript. Oto mapa, którą utworzysz za pomocą tego samouczka:
Rozpocznij
Oto kroki, które omówimy podczas tworzenia strony internetowej z kafelkami mapy termicznej interfejsu Pollen API:
- Uzyskiwanie klucza interfejsu API
- Tworzenie strony internetowej w języku HTML
- Konfigurowanie stylów za pomocą CSS
- Pobieranie danych interfejsu Pollen API za pomocą JavaScriptu
Aby utworzyć stronę internetową, potrzebujesz przeglądarki obsługującej JavaScript. Pełną listę obsługiwanych przeglądarek znajdziesz na stronie Obsługa przeglądarek.
Krok 1. Uzyskaj klucz interfejsu API
Z tej sekcji dowiesz się, jak uwierzytelnić aplikację w interfejsie Pollen API za pomocą własnego klucza interfejsu API.
Aby uzyskać klucz interfejsu API, wykonaj te czynności:
Otwórz konsolę Google Cloud.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć ten interfejs API i powiązane usługi.
Na stronie Dane logowania uzyskaj klucz interfejsu API i ustaw ograniczenia klucza interfejsu API.
Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z sekcją na temat używania kluczy API.
Włącz płatności. Więcej informacji znajdziesz w artykule Korzystanie i płatności.
Możesz teraz używać klucza interfejsu API.
Krok 2. Utwórz stronę internetową w języku HTML
Oto kod podstawowej strony internetowej w języku 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>
Aby wczytać mapę na swojej stronie internetowej, dodaj tag script zawierający moduł wczytywania dla interfejsu Pollen API i podaj klucz interfejsu API:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
Krok 3. Skonfiguruj style za pomocą CSS
Następnie użyj CSS, aby skonfigurować wygląd mapy na swojej stronie internetowej.
<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>
Za pomocą CSS możesz też skonfigurować przyciski wyświetlające różne dane interfejsu Pollen API (TREE, GRASS lub 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>
Aby utworzyć kontenery na przyciski i mapę, użyj elementu <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>
Krok 4. Pobierz dane interfejsu API pyłków za pomocą JavaScriptu
Użyj JavaScriptu, aby pobrać dane interfejsu Pollen API i wyświetlić je na interaktywnej mapie:
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) {}
}
Na koniec użyj JavaScriptu, aby zainicjować mapę i wyświetlić dane interfejsu Pollen API na podstawie wybranych przycisków:
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);
})
}