如何将 openweathermap api 中的数据添加到 google 地图中的 windowinfo？

Question

我正在尝试从打开天气图 api 并在每个点击点的 google 地图上的信息窗口中显示它，我从前一个标记而不是当前标记获取数据。

var map;
        var markers = [];
        var s = "";
        function initMap() {
            var currentLat;
            var currentLng;
            var coords;
            var contentString;
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 40.295308, lng: 62.164714 },
                zoom: 4
            });
            // get lng and lat
            google.maps.event.addListener(map, 'click', function (event) {
                currentLat = event.latLng.lat();
                currentLng = event.latLng.lng();
                coords = { lat: currentLat, lng: currentLng };
                getWeather(coords);
                addMarker(coords);
                s = "";
            });

            function addMarker(coords) {
                var marker = new google.maps.Marker({
                    position: coords,
                    map: map
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: s
                });
                marker.addListener('click', function () {
                    infoWindow.open(map, marker);
                });
                ///
            }

        }

        function getWeather(coords) {
            fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + coords.lat + '&lon=' + coords.lng + '&units=metric&appid=MYAPI')
                .then((response) => {
                    return response.json();
                })
                .then((myJson) => {

                    console.log(myJson);
                    s += myJson.name;
                }).catch((err) => {
                    console.log("Error: " + err);
                });
        }

我尝试使用全局字符串，我也尝试了几次在 getWeather 函数上使用 setTimeOut，但在将点发送到地图之前我无法获取信息

Answer 1

您正在使用异步调用获取天气的结果填充全局变量 s。在执行 addMarker() 并创建 InfoWindow.

时调用可能尚未完成

您应该仅在 getWeather 成功完成时调用 addMarker，并避免使用全局 s 变量。删除当前对 addMarker 的调用并将方法签名更改为；

function addMarker(coords, s) { ... }

然后修改getWeather函数；

function getWeather(coords) {
    fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + coords.lat + '&lon=' + coords.lng + '&units=metric&appid=MYAPI')
        .then((response) => {
                return response.json();
        })
        .then((myJson) => {
                addMarker(coords, myJson.name);
        }).catch((err) => {
                console.log("Error: " + err);
        });
}

如何将 openweathermap api 中的数据添加到 google 地图中的 windowinfo？

how to add data from openweathermap api to windowinfo in google maps?

javascript

google-maps

openweathermap