이 문서에서는 Air Quality API를 사용하여 풍부한 장소 검색 환경을 빌드하는 방법을 살펴봅니다. 처음부터 유입경로에 걸쳐 공기질이 사용자에게 어떻게 가치의 신호가 될 수 있는지, 그리고 Air Quality API 데이터를 기존 환경에 어떻게 삽입할 수 있는지도 보여줄 예정입니다.
사용 사례 및 부가 가치
Air Quality API 신호는 사용자가 방문할 위치를 찾는 경우와 같이 다양한 검색 환경에 적합할 수 있습니다. Air Quality API는 다음을 제공합니다.
- 실시간 * 및 이전 데이터: 현재 상태뿐만 아니라 30일 이내의 과거 데이터를 시간별 해상도로 나타내는 정확한 최신 데이터입니다. (* 실외 공기질에 대한 시간당 스냅샷)
- 전 세계 및 지역 데이터 - 100개 이상의 국가의 전체 지역을 포괄하지만 고도로 현지화 (최대 5억 개)한 Air Quality API 데이터는 사용자가 가장 적절한 장소를 비교하고 결정할 수 있는 주요 신호를 제공합니다.
근처에도 공기질이 급격히 다를 수 있습니다.
샘플 둘러보기
실험 환경 초기에 공기질 데이터를 표시합니다.
Air Quality API 데이터를 표시하는 방법에는 두 가지가 있습니다.
현재 상태 / 시간별: 각 위치에 표시할 개별 값을 가져옵니다.
(위치 핀에 Air Quality API 데이터 표시 섹션으로 이동)히트맵 타일: 지도에 현재 야외 공기질 상태를 나타내는 색상이 지정된 레이어를 오버레이합니다. 국가별 레이어 색인을 사용할 수 있습니다.
(지도에 Air Quality API 히트맵 레이어 표시하기 섹션으로 이동)
위치 핀에 Air Quality API 데이터 표시
- 위치 지수를 선택합니다(범용 AQI 또는 지역 AQI(최대 70개의 서로 다른 공기질 지수(AQI) 사용 가능)). 공기질 지수(AQI)는 특정 국가(예: 미국 EPA)에서 다양한 계산 방법, 데이터 소스, 지정된 목적에 따라 다양한 공기질 수준을 분류하는 기준입니다.
- 장소 검색 환경에서 바로 기본 Air Quality API 값과 색상 코드를 시각화하세요.
기본 디스플레이에는 색상 코드만 포함될 수 있습니다.
핀 선택 시 더 많은 Air Quality API 정보를 표시합니다.
- 범용 AQI / 로컬 AQI의 의미입니다.
- 오염 수준: 공기 중 입자 및 가스를 측정한 값: 주로 오염 물질, 농도, 발생원 및 효과.
- 건강 권장사항: 현재 공기질 상태와 관련해 권장되는 조치입니다.
- 필요에 따라 기본적으로 표시되는 정보의 수준을 조정할 수 있습니다. 위치의 데이터 포인트는 다른 위치와 비교할 때 유용한 경우가 많습니다.
공기질 섹션 표시의 예
{
"dateTime": "2023-08-09T10:00:00Z",
"regionCode": "fr",
"indexes": [
{
"code": "uaqi",
"displayName": "Universal AQI",
"aqi": 76,
"aqiDisplay": "76",
"color": {
"red": 0.4117647,
"green": 0.77254903,
"blue": 0.20392157
},
"category": "Good air quality",
"dominantPollutant": "pm10"
},
…
],
"pollutants": [
{
"code": "co",
"displayName": "CO",
"fullName": "Carbon monoxide",
"concentration": {
"value": 95.18,
"units": "PARTS_PER_BILLION"
}...
},
…
],
"healthRecommendations": -{
"generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!",
"elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...",
"lungDiseasePopulation": …
}
}
- 또는 위치와의 상호작용이 있을 때만 공기질 데이터를 쿼리할 수 있습니다.
- Air Quality API 지수를 사용하여 주변 장소를 필터링할 수 있습니다. 예를 들어 거주 지역에 있는 공원을 검색하면 공기질이 좋은 공원만 표시됩니다.
공기질 대응
...
"color":{
"red": 0.9490196,
"green": 0.98039216,
"blue": 0.019607844
}
...
RGB로 변환
var red = parseInt(colorResponse.red*255)|| 1; var green = parseInt(colorResponse.green*255)|| 1; var blue = parseInt(colorResponse.blue*255)|| 1; // --> output rgb(241,250,5)
지도에 Air Quality API 히트맵 레이어 표시
히트맵 색상 타일은 다음과 같은 좋은 방법입니다.
- 광범위한 개요를 제공합니다
- 해당 영역 내의 미묘한 차이를 빠르게 보여 줄 수 있습니다.
Maps JavaScript API와 ImateMapType을 함께 사용하여 Google 지도의 전체 표시 영역을 포함하는 데 필요한 개별 타일을 표시합니다. 사용자가 화면 이동, 확대/축소, 위치 변경을 통해 지도에 참여하면 히트맵 타일이 새로고침됩니다.
허용되는 확대/축소 수준 값은 최대 16입니다.
Air Quality API 히트맵 타일 레이어는 지역 밀착형 검색에서 사라질 수 있습니다.
제한된 공기질 지수 세트 내에서 히트맵 지도 유형을 선택할 수 있습니다.
사용자가 값과 색상 순위를 이해할 수 있도록 색상 스케일을 표시해야 합니다.
- 경사 조정 UAQI (0~100): 나쁨 / 아주 좋음
색상 팔레트 CSS 코드 스니펫:
.gradient-scale {
background: linear-gradient(to right,
rgb(99, 20, 161) 0%, /* purple */
rgb(149, 0, 25) 20%, /* red */
rgb(248, 47, 21) 40%, /* orange */
rgb(255, 248, 35) 60%, /* yellow */
rgb(34,163,120) 80%, /* steelblue */
rgb(255,255,255) 100% /* white */
);
}
- UAQI (0~100) 척도의 핵심 사항을 나타내는 단색: 나쁨 / 매우 좋음
관련 쿼리 수 및 비용
- Maps JavaScript API: 작업 로드 시 지도 1개
- Air Quality API:
- 모든 장소 (모두 지도 로드 시 또는 사용자 선택 시에만) 1회 쿼리
- 히트맵 타일 레이어: 모든 타일 이미지는 256*256픽셀이며 휴대기기나 웹에 표시되는 표준 지도를 덮으려면 12~14개의 타일이 필요합니다. 가져온 각 타일은 SKU 단위 1개로 계산됩니다.
- Nearby Search (New) API: 장소 20개 표시당 쿼리 1개 쿼리 응답의 일부인 장소 데이터에 따라 다른 청구 방식이 적용됩니다.
결론
Air Quality API는 사용자가 방문할 장소를 결정하는 데 중요한 데이터 포인트가 될 수 있음을 보여주었습니다. 따라서 공기질 데이터는 동시에 표시되는 정보의 양과 표시 방식에 주의하여 검색 환경에서 가능한 한 빨리 표시해야 합니다.
다음 작업
추천 추가 자료:
기여자
이 도움말은 Google에서 유지관리합니다. 이 글은 다음 도움을 주신 분들이 처음 작성했습니다.
주요 저자:
토마스 앙글라레트 | 솔루션 엔지니어