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

时间:2012-12-27 07:35:11

标签: google-maps-api-3

我正在尝试从“输入您的位置”文本框解析城市和国家/地区。 Google商家信息自动填充功能擅长检索位置,但并非每个结果都有国家/地区和城市(例如,输入“俄罗斯”会显示“俄罗斯”作为最高结果,其中没有列出任何城市)。保存用户类型的位置,但城市和国家/地区部分需要单独存储。

有没有办法强制每个自动完成结果包含城市和国家/地区,但不限制只有这两个? (例如,输入“俄罗斯”将显示“莫斯科,俄罗斯”或“115 X Street,莫斯科,俄罗斯”等。)

1 个答案:

答案 0 :(得分:0)

我的解决方案



<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>
&#13;
&#13;
&#13;