我正在尝试用数组中的一些数据更新热图，我希望它在每次移动滑块时更新
PM25_centru<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-container {
display: flex;
}
#map {
height: 400px;
width: 70%;
order: 2;
}
#sidebar {
background-color: white;
height: 400px;
width: 30%;
padding: 20px;
order: 1;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API&callback=initMap&libraries=visualization" async defer></script>
</head>
<body>
<input type="range" id="rangeInput" min="0" max="12" step="1" value="0">
<div id="map-container">
<div id="map"></div>
<div id="sidebar">
<h2>Date</h2>
<p id="selectedDataText"></p>
</div>
</div>
<script type="text/javascript">
var map, heatmap, data;
var selectedDataText = document.getElementById('selectedDataText');
function updateSelectedDataText(value) {
selectedDataText.textContent = value.toString();
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 47.8368,
lng: 25.8756
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
heatmap = new google.maps.visualization.HeatmapLayer({
map: map,
radius: 200
});
loadData();
document.getElementById('rangeInput').addEventListener('input', changeHeatmap);
}
var database = [{
Data_si_ora_: '2023-05-18T13:00:00.000Z',
PM25_centru: 418
},
{
Data_si_ora_: '2023-05-18T14:00:00.000Z',
PM25_centru: 416
},
{
Data_si_ora_: '2023-05-18T15:00:00.000Z',
PM25_centru: 417
},
{
Data_si_ora_: '2023-05-18T16:00:00.000Z',
PM25_centru: 416
},
{
Data_si_ora_: '2023-05-18T17:00:00.000Z',
PM25_centru: 418
},
{
Data_si_ora_: '2023-05-18T18:00:00.000Z',
PM25_centru: 419
},
{
Data_si_ora_: '2023-05-18T19:00:00.000Z',
PM25_centru: 415
},
{
Data_si_ora_: '2023-05-18T20:00:00.000Z',
PM25_centru: 416
},
{
Data_si_ora_: '2023-05-18T21:00:00.000Z',
PM25_centru: 415
},
{
Data_si_ora_: '2023-05-18T22:00:00.000Z',
PM25_centru: 410
},
{
Data_si_ora_: '2023-05-18T23:00:00.000Z',
PM25_centru: 413
},
{
Data_si_ora_: '2023-05-19T00:00:00.000Z',
PM25_centru: 414
},
{
Data_si_ora_: '2023-05-19T01:00:00.000Z',
PM25_centru: 418
}
];
function loadData() {
data = database;
updateHeatmap(0)
}
function changeHeatmap() {
var rangeInput = document.getElementById('rangeInput');
var selectedValue = parseInt(rangeInput.value);
updateHeatmap(selectedValue);
}
function updateHeatmap(index) {
var selectedData = data[index]['PM25_centru'];
updateSelectedDataText(data[index]['Data_si_ora_']);
var heatmapData = [];
for (var i = 0; i <= 1; i++) {
var latLng = new google.maps.LatLng(47.8368, 25.8756);
var weight = selectedData;
heatmapData.push({
location: latLng,
weight: weight
});
heatmap.setData(heatmapData);
}
}
</script>
</body>
</html>