Z tego samouczka dowiesz się, jak wyświetlać kafelki mapy cieplnej interfejsu Pollen API na stronie internetowej za pomocą HTML, CSS i JavaScriptu. Oto mapa, którą utworzysz w tym samouczku:
Rozpocznij
Oto etapy tworzenia strony internetowej z płytkami mapy cieplnej interfejsu Pollen API:
- Pobieranie klucza interfejsu API
- Tworzenie strony internetowej za pomocą HTML
- Konfigurowanie stylów za pomocą CSS
- Pobieranie danych z interfejsu Pollen API za pomocą JavaScriptu
Aby utworzyć stronę internetową, musisz użyć przeglądarki obsługującej JavaScript. Pełną listę obsługiwanych przeglądarek znajdziesz w sekcji Obsługiwane przeglądarki.
Krok 1. Uzyskaj klucz interfejsu API
W tej sekcji wyjaśniamy, jak uwierzytelnić aplikację w interfejsie Pollen API za pomocą własnego klucza interfejsu API.
Aby uzyskać klucz interfejsu API:
Otwórz konsolę Google Cloud.
Utwórz lub wybierz projekt.
Kliknij Dalej, aby włączyć interfejs API i powiązane z nim usługi.
Na stronie Dane logowania pobierz klucz interfejsu API i ustaw ograniczenia klucza interfejsu API.
Aby zapobiec kradzieży limitu i zabezpieczyć klucz interfejsu API, zapoznaj się z artykułem Korzystanie z kluczy interfejsu API.
Włącz płatności. Więcej informacji znajdziesz w artykule Wykorzystanie i rozliczenia.
Możesz już używać klucza interfejsu API.
Krok 2. Utwórz stronę internetową za pomocą HTML
Oto kod podstawowej strony internetowej 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 stronie internetowej, dodaj tag script zawierający program do uruchamiania interfejsu Pollen API i uwzględnij swój 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 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>Możesz też użyć CSS do skonfigurowania przycisków, które wyświetlają różne dane z 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 z interfejsu Pollen API za pomocą JavaScriptu
Użyj JavaScriptu, aby pobrać dane z 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); }) }