В этом руководстве показано, как отображать плитки тепловой карты Pollen API на веб-странице с использованием HTML, CSS и Javascript. Вот карта, которую вы создадите с помощью этого урока:
Начать
Вот шаги, которые мы рассмотрим для создания веб-страницы с плитками тепловой карты Pollen API:
- Получить ключ API
- Создайте веб-страницу с использованием HTML
- Настройка стилей с помощью CSS
- Получение данных API пыльцы с помощью JavaScript
Чтобы создать веб-страницу, вам понадобится веб-браузер, поддерживающий Javascript. Полный список поддерживаемых браузеров см. в разделе «Поддержка браузеров» .
Шаг 1. Получите ключ API
В этом разделе объясняется, как аутентифицировать ваше приложение в API Pollen с использованием вашего собственного ключа API.
Выполните следующие действия, чтобы получить ключ API:
Перейдите в облачную консоль Google .
Создайте или выберите проект.
Нажмите « Продолжить» , чтобы включить API и все связанные службы.
На странице «Учетные данные» получите ключ API и установите ограничения ключа API.
Чтобы предотвратить кражу квот и защитить свой ключ API, см. Использование ключей API .
Включить биллинг. Дополнительную информацию см. в разделе «Использование и выставление счетов» .
Теперь вы готовы использовать свой ключ 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 , содержащий загрузчик начальной загрузки для API Pollen, и укажите свой ключ 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 для настройки кнопок, отображающих различные данные 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. Получите данные 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);
})
}