leaflet与openweathermap api集成

<script src="leaflet.js"></script>
<script src="openweathermap.js"></script>

<div id="map"></div>
<script>
    var map = L.map('map').setView([51.505, -0.09], 13);
</script>

<script>
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
        maxZoom: 18,
    }).addTo(map);
</script>

<script>
    var apiKey = 'YOUR_API_KEY'; // 替换为你的openweathermap API密钥
    var url = 'https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid=' + apiKey;

    map.on('moveend', function () {
        var center = map.getCenter();
        var apiUrl = url.replace('{lat}', center.lat).replace('{lon}', center.lng);

        fetch(apiUrl)
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                // 处理返回的天气数据，可以根据需要在地图上添加标记或图层展示天气信息
            });
    });
</script>