强制Google地方信息自动填充结果包含国家和城市

本文介绍了强制Google地方信息自动填充结果包含国家和城市的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图从输入您的位置文本框中解析城市和国家。 Google Places Autocomplete擅长检索地点，但不是每个结果都有一个国家和一个城市（例如，键入Russia将显示Russia为最高结果，其中不包含任何城市）。无论用户类型是保存在哪个位置，都需要单独存储城市和国家/地区部分。

有没有办法强制每个自动填充结果同时包含城市和一个国家，但不仅限于这两个？（例如输入俄罗斯将显示莫斯科，俄罗斯或俄罗斯莫斯科115 X街等）。

我的解决方案

< html>< head> < meta charset =utf-8> < meta http-equiv =X-UA-Compatiblecontent =IE = edge> < title>放置自动填充< / title> < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css> < script src =https://code.jquery.com/jquery-1.11.2.jstype =text / javascript>< / script> < script src =https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=entype =text / javascript>< /脚本> < script type =text / javascript> var autocomplete; var place;函数initialize（）{var options = {types：['（cities）']}; var input = document.getElementById（'searchTextField'）; autocomplete = new google.maps.places.Autocomplete（input，options）; google.maps.event.addListener（autocomplete，'place_changed'，function（）{fillInPlace（）;}）; } function fillInPlace（）{place = autocomplete.getPlace（）; var $ address = $（place ['adr_address']）; $（＃resultTextField）VAL（$ address.text（））; on（'focusout'，function（e）{setTimeout（function（）{$（＃searchTextField）.val（'ready'，function（）{$（＃searchTextField）.val （''）;}，1000）;}）;}）google.maps.event.addDomListener（window，'load'，initialize）; < /脚本>< /头><身体GT; < form class ='form'> < div class =form-group> < div class =col-xs-12> < label for =searchTextField>城市< / label> < / DIV> < div class =col-xs-12> < input id =searchTextFieldtype =textplaceholder =Searchautocomplete =onclass ='form-control pull-left'style ='width：40％;余量右：3px的;> < input id =resultTextFieldtype =textplaceholder =autocomplete =onclass ='form-control pull-left'disabled ='disabled'style ='width：55％'> < / DIV> < / DIV> < / form>< / body>< / html>

I'm trying to parse a city and country from an "Enter your location" textbox. Google Places Autocomplete is good at retrieving locations, but not every result has a country and a city (e.g. typing in "Russia" will show "Russia" as the top result, which lists no city). Whatever location the user type is saved, but the city and country portions need to be stored separately.

Is there a way to force every autocomplete result to contain both a city and a country, BUT not limit it to only those two? (e.g. typing in "Russia" would show "Moscow, Russia" or "115 X Street, Moscow, Russia", etc.)

解决方案

My solution

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>Place Autocomplete</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <script src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>

  <script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places&amp;language=en" type="text/javascript"></script>

  <script type="text/javascript">

      var autocomplete;
      var place;

      function initialize()
      {
        var options       = {types: ['(cities)']};
        var input         = document.getElementById('searchTextField');

        autocomplete  = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          fillInPlace();
        });
      }

      function fillInPlace() {
        place = autocomplete.getPlace();
        var $address = $(place['adr_address']);
        $('#resultTextField').val($address.text());
      }

      $(document).on('ready', function(){
          $("#searchTextField").on('focusout', function(e){
              setTimeout(function() {
                    $("#searchTextField").val('');
              }, 1000);
          });
      })

      google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>

<body>
  <form class='form'>
    <div class="form-group">
      <div class="col-xs-12">
        <label for="searchTextField">City</label>
      </div>
      <div class="col-xs-12">
        <input id="searchTextField" type="text" placeholder="Search" autocomplete="on" class='form-control pull-left' style='width:40%; margin-right:3px;'>
        <input id="resultTextField" type="text" placeholder="" autocomplete="on" class='form-control pull-left' disabled='disabled' style='width:55%'>
      </div>
    </div>
  </form>
</body>
</html>

这篇关于强制Google地方信息自动填充结果包含国家和城市的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！