Javascript 调用API时的全局变量与局部变量

我目前正在尝试创建一个脚本，它获取一个地址并返回一个带有固定地址的映射。我试图调用谷歌地理编码API，然后将lat和lng转换为返回的位置

我认为我正在努力解决的是如何创建API对象的全局变量

HTML

输入位置：


提交

//调用地理代码
//地理编码（）；
//获取位置表
var locationForm=document.getElementById（'location-form'）；
//听取意见
locationForm.addEventListener（“提交”，地理编码）；
功能地理编码（e）{
//防止实际提交
e、 预防默认值（）；
var location=document.getElementById（'location-input'）。值；
axios.get（）https://maps.googleapis.com/maps/api/geocode/json',{
参数：{
地址:地址:，
钥匙：“秘密”
}
})
.然后（功能（响应）{
//日志完整响应
控制台日志（响应）；
var lat=response.data.results[0].geometry.location.lat；
var lng=response.data.results[0].geometry.location.lng；
//格式化地址
var formattedAddress=response.data.results[0]。格式化的\u地址；
var formattedAddressOutput=`

${formattedAddress}

`;
//新地图
var map=new google.maps.map（document.getElementById（'map'），options）；
//地址组件
var addressComponents=response.data.results[0]。地址\组件；
var addressComponentsOutput='
'；
对于（var i=0；i${addressComponents[i]。类型[0]}：${addressComponents[i]。long_name}
`;
}
addressComponentsOutput+='
'；
//几何学
var geometryOutput=`

纬度：${lat}
经度：${lng}

`;
//输出到应用程序
document.getElementById（'formatted-address'）。innerHTML=formattedAddressOutput；
document.getElementById（'address-components'）。innerHTML=addressComponentsOutput；
document.getElementById（'geometry'）。innerHTML=geometryOutput；
})
.catch（函数（错误）{
console.log（errorGeocode）；
});
}
函数initMap（）{
//地图选项
变量选项={
缩放：8，
中心：{lat:lat，lng:lng}
}

---

我继续捕捉errorGeocode控制台日志。

您遇到了什么错误？我猜这与您的

选项

试图引用上述函数范围之外不存在的

lat

和

lng

有关。这和您在结束

initMap（）{…}时省略了一个

<div class="container">
  <h2 id="text-center">Enter Location: </h2>
  <form id="location-form">
    <input type="text" id="location-input" class="form-control form-control-lg">
    <br>
    <button type="submit" class="btn btn-primary btn-block">Submit</button>
  </form>
  <div class="card-block" id="formatted-address"></div>
<div id="map"></div>
  <div class="card-block" id="address-components"></div>
<div class="card-block" id="geometry"></div>

<script>
// Call Geocode
//geocode();

// Get location form
var locationForm = document.getElementById('location-form');

// Listen for submit
locationForm.addEventListener('submit', geocode);

function geocode(e){
  // Prevent actual submit
  e.preventDefault();

  var location = document.getElementById('location-input').value;

  axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
    params:{
      address:location,
      key:'secret'
    }
  })
  .then(function(response){
    // Log full response
    console.log(response);

    var lat = response.data.results[0].geometry.location.lat;
    var lng = response.data.results[0].geometry.location.lng;

    // Formatted Address
    var formattedAddress = response.data.results[0].formatted_address;
    var formattedAddressOutput = `
      <ul class="list-group">
        <li class="list-group-item">${formattedAddress}</li>
      </ul>
    `;

    // New map
    var map = new google.maps.Map(document.getElementById('map'), options);

    // Address Components
    var addressComponents = response.data.results[0].address_components;
    var addressComponentsOutput = '<ul class="list-group">';
    for(var i = 0;i < addressComponents.length;i++){
      addressComponentsOutput += `
        <li class="list-group-item"><strong>${addressComponents[i].types[0]}</strong>: ${addressComponents[i].long_name}</li>
      `;
    }
    addressComponentsOutput += '</ul>';

    // Geometry
    var geometryOutput = `
      <ul class="list-group">
        <li class="list-group-item"><strong>Latitude</strong>: ${lat}</li>
        <li class="list-group-item"><strong>Longitude</strong>: ${lng}</li>
      </ul>
    `;

    // Output to app
    document.getElementById('formatted-address').innerHTML = formattedAddressOutput;
    document.getElementById('address-components').innerHTML = addressComponentsOutput;
    document.getElementById('geometry').innerHTML = geometryOutput;
  })
  .catch(function(error){
    console.log(errorGeocode);
  });
}

  function initMap(){
  // Map options
  var options = {
    zoom:8,
    center:{lat:lat,lng:lng}
  }
 </script>