<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雾霾网页探测系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
</head>
<body>
<header>
<h1>雾霾网页探测系统</h1>
<div id="location"></div>
</header>
<!-- 天气详情和空气质量指数部分 -->
<div id="weather-details">
<h2>天气详情和空气质量指数</h2>
<div id="weather"></div>
<div id="air-quality"></div>
</div>
<!-- 湿度温度折线图部分 -->
<div id="chart-container">
<canvas id="temperature-humidity-chart"></canvas>
</div>
<!-- JavaScript代码 -->
<script>
// 获取定位信息
function getLocation() {
// 检查浏览器是否支持Geolocation API
if (navigator.geolocation) {
// 使用Geolocation API获取定位信息
navigator.geolocation.getCurrentPosition(function(position) {
// 获取到经度和纬度信息
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// 使用经纬度信息调用百度地图API获取城市名称
getCityName(latitude, longitude);
}, function(error) {
// 如果获取定位信息失败，则显示错误信息
console.error("定位失败：" + error.message);
document.getElementById("location").innerText = "定位失败";
});
} else {
// 如果浏览器不支持Geolocation API，则显示提示信息
console.error("您的浏览器不支持Geolocation API");
document.getElementById("location").innerText = "浏览器不支持定位";
}
}
// 使用百度地图API获取城市名称
function getCityName(latitude, longitude) {
// 发送请求给百度地图API，获取城市名称
// 这里需要使用你自己的百度地图API密钥
var apiKey = "YOUR_BAIDU_MAP_API_KEY";
var url = "https://api.map.baidu.com/reverse_geocoding/v3/?ak=" + apiKey + "&output=json&location=" + latitude + "," + longitude;
// 发送GET请求
fetch(url)
.then(response => response.json())
.then(data => {
// 获取城市名称并更新页面上的定位信息显示
var cityName = data.result.addressComponent.city;
document.getElementById("location").innerText = "当前位置：" + cityName;
})
.catch(error => {
console.error("获取城市名称失败：" + error);
document.getElementById("location").innerText = "获取城市名称失败";
});
}
// 调用获取定位信息的函数
getLocation();
// 获取天气详情和空气质量指数
function getWeatherAndAirQuality() {
// 通过百度天气API获取天气详情和空气质量指数
// 这里需要你自己填写获取天气和空气质量指数的代码
// 然后更新页面上的天气详情和空气质量指数显示
document.getElementById("weather").innerText = "天气详情：晴";
document.getElementById("air-quality").innerText = "空气质量指数：优";
}
// 绘制湿度温度折线图
function drawTemperatureHumidityChart() {
// 使用Chart.js绘制折线图
// 这里需要你填写折线图的数据和配置
const ctx = document.getElementById('temperature-humidity-chart').getContext('2d');
const temperatureHumidityChart = new Chart(ctx, {
type: 'line',
data: {
// 这里填写折线图的数据
},
options: {
// 这里填写折线图的配置
}
});
}
// 页面加载完毕时执行的操作
window.onload = function() {
// 调用获取定位信息的函数
getLocation();
// 调用获取天气详情和空气质量指数的函数
getWeatherAndAirQuality();
// 调用绘制湿度温度折线图的函数
drawTemperatureHumidityChart();
}
</script>
</body>
</html>
网友评论