aqicn.org의 실시간 대기질 지도를 스크립트 태그 하나만으로 웹사이트에 삽입할 수 있습니다.

지도가 페이지에 표시될 위치에 아래 코드를 복사하세요.

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="kr"
        data-height="450"></script>

결과 (지도를 이동하거나 확대/축소하여 위 코드를 업데이트하세요):

페이지 렌더링 지연을 방지하려면 async 또는 defer 속성을 사용하여 스크립트를 비동기적으로 로드할 수 있습니다. 이렇게 하면 스크립트가 페이지의 현재 위치에서 실행되지 않으므로 ` data-dom-target 속성을 사용하여 지도가 삽입될 요소를 지정해야 합니다. 이 요소는 스크립트 태그 앞이나 뒤 등 페이지의 어느 위치에나 배치할 수 있습니다.

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="kr"
        data-dom-target="aqi-map"
        data-height="450"></script>

결과:

자바스크립트에서 스크립트 로드

스크립트는 태그 관리자나 단일 페이지 애플리케이션(SPA) 등에서 동적으로 삽입할 수도 있습니다. 동일한 data-dom-target 규칙이 적용됩니다.

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "kr");
  document.head.appendChild(s);
</script>

이 지도는 스크립트 태그의 다음 속성으로 구성됩니다. 비동기 로딩을 위한 data-dom-target 제외하고는 모두 선택 사항입니다.

한 페이지에 여러 개의 지도를 삽입할 수 있습니다. 지도 하나당 스크립트 태그를 하나씩 사용하세요.

아래 옵션을 입력하여 지도 코드를 받고 미리 보기를 해보세요.

• 지도에 있는 링크(예: 역 정보)는 새 탭에서 열리므로 방문자는 페이지를 벗어나지 않습니다.
• 이 지도는 http 또는 https 로 제공되는 모든 웹사이트에 삽입할 수 있습니다. 하지만 로컬 파일( file:// )로 열린 페이지에서는 표시할 수 없습니다.
• 지도를 샌드박스 iframe에 배치하는 경우 샌드박스는 최소한 allow-scripts allow-same-origin allow-popups 허용해야 합니다.
• 세계 대기질 지수 프로젝트 및 데이터 출처에 대한 출처 표기를 삭제하거나 숨기지 마십시오.

iframe을 직접 사용하는 방법

페이지에 스크립트를 추가할 수 없는 경우, 일반 iframe을 사용하여 지도를 삽입할 수도 있습니다. 위치는 URL의 일부이며, lat , lng 및 zoom 매개변수를 사용하여 보기 방식을 설정합니다.

<iframe src="https://aqicn.org/maplet/london/kr/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>