Google GeoCode API的值无法正确返回

Question

我为一个正在Web设计课程中进行的项目进行了大约一天的工作，一直在为这个错误而苦苦挣扎，而且我还远远没有弄清楚如何解决它。 对于该项目，我使用两种API的组合来读取用户指定的位置，使用Google GeoCoding API获取该位置的纬度和经度，然后使用该纬度和经度显示该位置的当前天气。 问题是，无论我做什么，我将位置对象（名称，纬度和经度）返回到主要index.html文件脚本的函数永远不会正确返回，我相信这可能是因为它异步运行。 我对javascript有点陌生，所以如果我对您的答案提出很多问题，请提前道歉。 这是我的location.js文件中的代码：

class Location
{
    constructor(name = "Dummy Location", lat = 0.0, lng = 0.0)
    {
        this.name = name;
        this.lat = lat;
        this.lng = lng;
    }
}
function geocode(location)
{
    axios.get('https://maps.googleapis.com/maps/api/geocode/json?',
    {
        params: { 
            address: location, 
            key: googleAPIKey
        }
    })
    // Get a reponse from that request
    .then(function(response)
    {
        ///Format the address
        var formattedAddress = response.data.results[0].formatted_address;
        // Get the various address components
        var locationName = `${response.data.results[0].address_components[0].long_name}, ${response.data.results[0].address_components[2].short_name}`;
        var locationLat = response.data.results[0].geometry.location.lat;
        var locationLng = response.data.results[0].geometry.location.lng;
        // Create a new Location based on those components
        var geoLocation = new Location(locationName, locationLat, locationLng);
        // (Debug) Log that location
        console.log(geoLocation);
        // Return that location
        return geoLocation;
    })
    .catch(function(error)
    {
        console.log(error);
    })
}

这是我index.html中的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Cool Weather App</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel = "stylesheet" href="css/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <header>
    <div id = "locationinputcontainer">
        <input id="locationfield" type="text" value="Location">
        <input id = "submitbutton" type="submit" value="Submit">
        <input id = "savelocationbutton" type = "submit" value = "Save Location">
    </div>
    </header>
    <div id = "locationweathercontainer">
        <h1 id = "locationname">Dummy Value</h1>
        <h2 id = "weather">Weather</h2>
        <h1 id = "temperature">68&deg;F</h1>
        <h3 id = "precipitation">Precipitation:</h3>
        <h3 id = "humidity">Humidity: </h3>
        <h3 id = "windspeed">Wind Speed: </h3>
    </div>
    <div id = "mylocationscontainer" class = "dropdowncontainer" style = "float:left">
        <h1>My Locations</h1>
        <ol>
        </ol>
    </div>
    <div id = "settingscontainer" class = "dropdowncontainer" style = "float:right">
        <h1>Settings</h1>
    </div>
</body>
<script src = "js/location.js"></script>
<script>
    const locationField = document.querySelector("#locationfield");
    const submitButton = document.querySelector("#submitbutton");
    const saveButton = document.querySelector("#savelocationbutton");
    const locationNameElement = document.querySelector("#locationname");
    const locationsListElement = document.querySelector("#mylocationscontainer");

    const prefix = "asb9599-";
    const storedLocationsKey = prefix + "storedLocations";
    const storedCurrentLocationKey = prefix + "storedCurrentLocation";
    let currentLocation;
    let locationInput;

    /* Functions */
    function UpdateCurrentLocation()
    {
        currentLocation = geocode(locationInput);
        console.log("(index.html) Current Location: " + currentLocation);
        locationNameElement.innerHTML = currentLocation.name;
    }
    /* Events */
    submitButton.onclick = UpdateCurrentLocation;
    locationField.onchange = e => {locationInput = e.target.value};
</script>
</html>

Andddd这是我得到的答复：样本响应图像

Answer 1

params: { 
            address: location, 
            key: googleAPIKey(paste your apikey here)
        }

从Google获取api密钥并将其粘贴到密钥的位置。否则它将无法正常工作。

Google GeoCode API的值无法正确返回

问题描述

1 个解决方案

解决方案1
0 2018-11-04 13:43:46

Google GeoCode API的值无法正确返回

问题描述

1 个解决方案

解决方案1 0 2018-11-04 13:43:46

解决方案1
0 2018-11-04 13:43:46