javascript - 使用 JavaScript 从一个函数返回数据以插入另一个函数

Question

我正在尝试在我的 ASP.NET Core Razor Pages 项目中使用 Google Maps JavaScript API 在我的网站上创建地图。用户将输入一个地址，该地址将保存为 TempData，然后插入到 Google Maps Geocoder API 的参数中，然后将地址转换为坐标。然后，我想将这些坐标用作 Google Maps Javascript API 调用的参数。

我有一个名为 getLatitude 的函数和一个名为 getLongitude 的函数，如图所示：

     function getLatitude() {
        searchedAddress = @Html.Raw(Json.Serialize(ViewData["searchString"]));
        axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
            params: {
                address: searchedAddress,
                key: 'xxxxxx'
            }
        })
            .then(function (response) {
                var lat = response.data.results[0].geometry.location.lat;

                // This prints the correct value to the console.
                console.log(lat)
                
                // I want to return this value when I call the method.
                return lat;
            })
            .catch(function (error) {
                console.log(error);
            });
    }

     function getLongitude() {
        searchedAddress = @Html.Raw(Json.Serialize(ViewData["searchString"]));
        axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
            params: {
                address: searchedAddress,
                key: 'xxxxxx'
            }
        })
            .then(function (response) {
                var lng = response.data.results[0].geometry.location.lng;
                
                // This prints the correct value to the console.
                console.log(lng);

                // I want to return this value when I call the method.
                return lng;     
            })
            .catch(function (error) {
                console.log(error);
            });
    }

然后我有一个名为 initMap 的函数，它使用 Google Maps JavaScript API 创建地图：

    function initMap() {
        var latitude = getLatitude()
        var longitude = getLongitude()

        // This is where I need to input the getLatitude and getLongitude data
        const location = { lat: latitude, lng: longitude }

        var options = {
            zoom: 15,
            center: location
        }
        const map = new google.maps.Map(document.getElementById('map'), options);
        const marker = new google.maps.Marker({
            position: location,
            map: map,
        });
    }

如何在 getLatitude 和 getLongitude 函数中使用能够打印到控制台的数据并将其放入 initMap 函数位置变量中？

标签： javascriptgoogle-maps-api-3axios

Answer 1

您可以使用异步/等待

  async function getLatitude() {
    searchedAddress = @Html.Raw(Json.Serialize(ViewData["searchString"]));
    const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
            address: searchedAddress,
            key: 'xxxxxx'
        }
    });

    let lat = response.data.results[0].geometry.location.lat;       
    return lat;
}

   async function getLongitude() {
    searchedAddress = @Html.Raw(Json.Serialize(ViewData["searchString"]));
    const response = await axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
        params: {
            address: searchedAddress,
            key: 'xxxxxx'
        }
    });
    let lng = response.data.results[0].geometry.location.lng;
    return lng;
}

你的调用者函数initMap()

    async function initMap() {
    let latitude = await getLatitude()
    let longitude = await getLongitude()

    const location = { lat: latitude, lng: longitude }

    var options = {
        zoom: 15,
        center: location
    }
    const map = new google.maps.Map(document.getElementById('map'), options);
    const marker = new google.maps.Marker({
        position: location,
        map: map,
    });
}