世界空气质量指数项目的实时空气质量地图可以通过一个脚本标签嵌入到任何网站上。该地图显示所选位置周围所有监测站的实时空气质量指数，并自动更新。

将以下代码复制到页面上地图应该出现的位置：

<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="cn"
        data-height="450"></script>

结果（移动或缩放地图以更新上述代码）：

为了避免页面渲染延迟，可以使用async或defer属性异步加载脚本。由于脚本不会在其页面当前位置运行，因此需要使用data-dom-target属性指定地图插入的元素。该元素可以放置在页面中的任何位置，包括 `<script>` 标签之前或之后。

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

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

结果：

从 JavaScript 加载脚本

脚本也可以动态插入，例如通过标签管理器或单页应用程序。同样的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", "cn");
  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/cn/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>