Javascript从异步函数

时间:2017-07-08 03:44:50

标签: javascript json asynchronous google-maps-api-3 weather-api

我知道这是一个非常受欢迎且多次回答的主题,但我

在我的案例中无法完全理解它的应用程序。

我正在通过Javascript学习我的方式,并且我试图从异步函数返回一个值。基本上,我希望我的函数获取城市名称并从APIXU Weather API(https://www.apixu.com)返回其当前温度。

然后,我想在我的其他Google API函数中使用此函数。此功能获取点击标记的ID,在地点数组中找到它的城市名称,并在信息窗口中显示信息,例如地点标题,城市天气和Google街景。我最初的计划是在populateInfoWindow中使用getWeather函数来查找城市的天气。有可能实现吗?因为从我所理解的同步内部使用异步函数,会使最新的一个异步。我要选择的另一条可能的路线是在文档加载时获取数组中所有位置的天气,并从populateInfoWindow函数中获取数组中的信息。但我担心这将是重复和不必要的。

您认为,实现它的最佳方法是什么以及如何避免类似的问题?

以下是代码:

//Get current forecast from weather API
        function getWeather(city) {
            var weatherAPIXU = "http://api.apixu.com/v1/current.json?key=XXXXXXXXXXXXXXX&q=" + city;
            $.getJSON(weatherAPIXU, function(data) {
                var forecast = data.current.temp_c;
                var curWeather = forecast + '° C';
                 return curWeather
            });
        }

// Return a city name that matches a marker id
function getCityName(locations, marker) {
    for (var i = 0, iLen = locations.length; i < iLen; i++) {
        if (locations[i].id == marker.id) return locations[i].city;
    }
}

// This function populates the infowindow when the marker is clicked. It'll only allow
// one infowindow which will open at the marker that is clicked, and populate based
// on that markers position.
function populateInfoWindow(marker, infowindow) {
    // Check to make sure the infowindow is not already opened on this marker.
    if (infowindow.marker != marker) {
        // Clear the infowindow content to give the streetview time to load.
        infowindow.setContent('');
        infowindow.marker = marker;
        // Make sure the marker property is cleared if the infowindow is closed.
        infowindow.addListener('closeclick', function() {
            infowindow.marker = null;
        });
        var streetViewService = new google.maps.StreetViewService();
        var radius = 50;
        var city = getCityName(locations, marker);
        console.log(city);
        var weatherInCity = getWeather(city);
        console.log(weatherInCity);
        // In case the status is OK, which means the pano was found, compute the
        // position of the streetview image, then calculate the heading, then get a
        // panorama from that and set the options
        var getStreetView = function(data, status) {
            if (status == google.maps.StreetViewStatus.OK) {
                var nearStreetViewLocation = data.location.latLng;
                var heading = google.maps.geometry.spherical.computeHeading(
                    nearStreetViewLocation, marker.position);
                infowindow.setContent('<div>' + marker.title + '' + weatherInCity +
                    '</div><div id="pano"></div>');
                var panoramaOptions = {
                    position: nearStreetViewLocation,
                    pov: {
                        heading: heading,
                        pitch: 30
                    }
                };
                var panorama = new google.maps.StreetViewPanorama(
                    document.getElementById('pano'),
                    panoramaOptions);
            } else {
                infowindow.setContent('<div>' + marker.title +
                    '</div>' +
                    '<div>No Street View Found</div>');
            }
        };
        // Use streetview service to get the closest streetview image within
        // 50 meters of the markers position
        streetViewService.getPanoramaByLocation(marker.position,
            radius, getStreetView);
        // Open the infowindow on the correct marker.
        infowindow.open(map, marker);
    }
}

2 个答案:

答案 0 :(得分:2)

你不能返回这样的对象,因为它是回调函数。您可以在回调函数中编写逻辑。

function getWeather() {
var city = $("#txtCity").val();
    var weatherAPIXU = "http://api.apixu.com/v1/current.json?key=XXXXXXX&q=" + city;
    $.getJSON(weatherAPIXU, function(data) {
        var forecast = data.current.temp_c;
        var curWeather = forecast + '° C';
        $("#lblTemp").html(curWeather)

    });

不推荐使用的Other选项是声明一个全局变量并将返回值赋给全局变量。

var CurrentWeather = null
function getWeather(city) {

var weatherAPIXU = "http://api.apixu.com/v1/current.json?key=XXXXX&q=" + city;
$.getJSON(weatherAPIXU, function(data) {
    var forecast = data.current.temp_c;
    var curWeather = forecast + '° C';
    $("#lblTemp").html(curWeather)
     CurrentWeather = curWeather;
});

答案 1 :(得分:0)

你的函数可能返回一个值,我的猜测是你试图在函数返回之前使用该值。