如何以编程方式将位置名称放入 Google JS 自动完成 API 并获得结果？

【问题标题】：how to put a location name programmatically in Google JS autocomplete API and get the results?如何以编程方式将位置名称放入 Google JS 自动完成 API 并获得结果？
【发布时间】：2015-06-22 21:28:08
【问题描述】：

使用谷歌自动完成 API 搜索爱丁堡纳皮尔大学时，我没有得到州和城市，应该是苏格兰和爱丁堡。

如果结果不包括城市和州，我希望它采用邮政城镇名称（在我们的例子中是爱丁堡）并搜索邮政城镇的州和城市，然后将它们包括为城市和州爱丁堡纳皮尔大学。

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  administrative_area_level_2: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',
  postal_town: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')));
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }

  if(locality.value == '' && administrative_area_level_1.value == '') {
    if(postal_town.value != '') {
        <!--- What to place here? -->
    }
  }
}
// [END region_fillform]

    </script>

    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
  </head>

  <body onload="initialize()">
    <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate()" type="text"></input>
    </div>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Postal town</td>
        <td class="wideField" colspan="3"><input class="field"
              id="postal_town" disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">state2</td>
        <td class="wideField" colspan="3"><input class="field"
              id="administrative_area_level_2" disabled="true"></input></td>
      </tr>
    </table>
  </body>
</html>

【问题讨论】：

  • 有邮政编码系统吗？您（人类）能否看到英国的哪个国家/地区对应于邮政编码（如果您无法回复，请编辑您的问题）？因为您是对的，所以 Google 不会在任何结果组件中发送“苏格兰”。
  • 我尝试搜索“苏格兰西部大学”，它显示国家为苏格兰，国家为英国。它有时会显示苏格兰。是的，有一个邮政编码系统，尽管它并不总是可检索的。但我的问题是，如果由于某种原因无法检索城市或州，那么我需要另一种解决方案来查找信息。
  • 是的，那么您应该将城市传递给另一个返回国家/地区的搜索引擎。我认为这个 API 可能是解决方案：geobytes.com/free-ajax-cities-jsonp-api。或者你有一些带有城市/邮政编码的列表

标签： javascript api autocomplete


【解决方案1】：

我尝试了一些方法，正如我在 cmets 中提到的，我通过一个用于搜索城市详细信息的 API 传递值。

查看函数 getUkCountry()。

该函数尝试了英国的四个地区/国家。 它适用于你提到的案例，它适用于威斯敏斯特。我对这个剧本不是很满意，但它是一些东西

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  administrative_area_level_2: 'short_name',
  country: 'long_name',
  postal_code: 'short_name',
  postal_town: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')));
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
  if($('#administrative_area_level_1').val() == '') {
    getUkCountry($('#postal_town').val(), 0);
  }
}
  function getUkCountry(city, i) {
    var countries = ['EN', 'SC', 'NI', 'WA'];
    if (i>=countries.length) {
      return false;
    }
    // Here is an API that gets address components
    // http://www.geobytes.com/free-ajax-cities-jsonp-api
    $.getJSON(
      "http://gd.geobytes.com/GetCityDetails?callback=?&fqcn=" + city + ', ' + countries[i] + ', United Kingdom' ,
      function (data) {
        if (! data.geobytesregion) {
          getUkCountry(city, i+1);
        }
        $('#administrative_area_level_1').val(data.geobytesregion);
      }
    );
  }
// [END region_fillform]
    </script>
    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
  </head>
  <body onload="initialize()">
    <p>
      Try to search for these:<br>
      Edinburgh napier university<br>
      Westminster Abbey
    </p>
    <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
    </div>
    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Postal town</td>
        <td class="wideField" colspan="3"><input class="field"
              id="postal_town" disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">state2</td>
        <td class="wideField" colspan="3"><input class="field"
              id="administrative_area_level_2" disabled="true"></input></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：

  • 完美，每次都能使用。我有州，城就是邮城，然后田地都填满了。非常感谢你，我从你身上学到了很多。
  • 很高兴知道 api 可以正常工作，有一天我可以使用它
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-13
  • 1970-01-01
  • 2010-11-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode