css
body {font-family: Arial, sans-serif;
}h1 {text-align: center;
}map {width: 100%;height: 500px;
}info-panel {display: flex;justify-content: space-around;align-items: center;width: 100%;height: 200px;background-color: f5f5f5;
}station-info {width: 50%;
}train-info {width: 50%;
}p {margin-bottom: 10px;
}b {font-weight: bold;
}
javascript
// Initialize the map
var map = L.map('map').setView([30.28683, 120.15603], 13);// Add the OpenStreetMap tile layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '©
OpenStreetMap
contributors'
}).addTo(map);// Add the Hangzhou subway station layer
L.geoJSON(stations, {pointToLayer: function(feature, latlng) {return L.marker(latlng);},onEachFeature: function(feature, layer) {layer.bindPopup(feature.properties.name);}
}).addTo(map);// Add the event listener for the subway station layer
map.on('click', function(e) {var station = e.layer.feature.properties;// Update the station info paneldocument.getElementById('station-info').innerHTML = `
站点名称：
${station.name}
运营时间：
${station.operation_hours}
换乘线路：
${station.interchange_lines}
`;// Get the train infogetTrainInfo(station.id);
});// Function to get the train info
function getTrainInfo(stationId) {var url = `${stationId}`;fetch(url).then(response => response.json()).then(data => {// Update the train info paneldocument.getElementById('train-info').innerHTML = `
列车编号：
${data.train_id}
到站时间：
${data.arrival_time}
终点站：
${data.destination}
`;}).catch(error => {console.log(error);});
}
