javascript - 随机故障 - 使用 Google Location API 丰富 Webform 城市和州

Question

我在编程方面没有太多经验，我正在寻求帮助，以了解为什么在提交表单时谷歌位置 api 脚本没有填充城市和州的 webform 字段。我们的失败率约为 30%，似乎没有达到任何 api 调用限制，这不是由于邮政编码无效。无法弄清楚问题是什么。

背景： 我们的网站上有带有这些可见字段的表格：

• 姓名
• 电子邮件
• 邮政编码
• 国家（选择列表）

这些隐藏字段（通过页面上脚本的调用填充）：

• 城市
• 状态

我们正在寻找的基本过程是：

当用户输入表单时，邮政编码长度大于或等于 5 并且国家不为空，然后调用谷歌的位置 api 并使用城市和州填充表单隐藏字段。

以下是我们正在使用的脚本：

放置在 Head 中的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

正文结束标记之前的脚本位置：

<script type='text/javascript' >

$(document).ready(function() {
    // Get city/state only if country has been selected and postal code is at least
    // 5 characters long
    $('#PostalCode,#Country').change(function() {
      var postalCode = $('#PostalCode').val();
      var countryCode = $('#Country option:selected').val();
      if (postalCode.length >= 5 && countryCode !== '') {
        getResponse(postalCode);
      }
    });
})

function getResponse(postalCode) {
  var apiKey = 'OurAPIkeyIshere';
  var baseUrl = `https://maps.googleapis.com/maps/api/geocode/json?&key=`;
  var countryCode = $('#Country option:selected').val();
  var componentFilter = `&components=country:${ countryCode }|postal_code:${ postalCode }&`;
  var date = new Date();
  var dateTime = `&_=${ date.getTime() }`;
  var url = baseUrl + apiKey + componentFilter + dateTime;

  $.support.cors = true;
  $.ajaxSetup({ cache: false });
  $.getJSON(url, function(response) {
    var getStatus = response.status;
    if (getStatus === 'OK') {
      getCityState(response.results[0].address_components);
    }
  });
}

function getCityState(addressComponents) {
  var city, state, nbhd, subLoc = '';
  var hasCity, hasPostalTown, hasSubLoc = false;

  $.each(addressComponents, function(index, addressComponent) {
    var types = addressComponent.types;
    $.each(types, function(index, type) {
      switch(type) {
        case 'postal_town':
          postalTown = addressComponent.long_name;
          hasPostalTown = true;
          break;
        case 'locality':
          city = addressComponent.long_name;
          hasCity = true;
          break;
        case 'sublocality':
          subLoc = addressComponent.long_name;
          hasSubLoc = true;
          break;
        case 'neighborhood':
          nbhd = addressComponent.long_name;
          break;
        case 'administrative_area_level_1':
          state = addressComponent.short_name;
          break;
      }
    });
  });

  // set the city
  if(hasPostalTown) {
    $('#City').val(postalTown);
  } else if(hasCity) {
    $('#City').val(city);
  } else if(hasSubLoc) {
    $('#City').val(subLoc);
  } else {
    $('#City').val(nbhd);
  }

  // set the state
  $('#State').val(state);

  // reset flags
  hasCity = false;
  hasPostalCode = false;
  hasSubLoc = false;
}
</script>

标签： javascriptjquerygoogle-apiwebforms