javascript - 如何解决 Rails 应用中 Google map 自动完成功能中的此问题？

Question

我正在为出租车预订平台创建一个 Rails 应用程序，需要输入上车点和下车点。为此，我在我的 application.html.erb 的 header 标记中包含了以下脚本:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
  var placeSearch,autocomplete;
  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });

    autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete2, 'place_changed', function() {
      fillInAddress();
});
  }
  function fillInAddress() {
    var place = autocomplete.getPlace();

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

    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }
</script>

然后我在我的标签中使用了这个js，如下所示:

<div class="field">
    <%= label_tag ("Pickup Location: ") %><br>
    <%= text_field_tag :pickup_loc, nil, :id => "autocomplete", :placeholder => "Enter your pickup location" %>
  </div>
  <div class="field">
    <%= label_tag ("Drop Location: ") %><br>
    <%= text_field_tag :drop_loc, nil, :id => "autocomplete2", :placeholder => "Enter your dropoff location" %>
  </div>

虽然自动完成功能似乎有效，但自动完成功能的结果似乎是谷歌地图给出的结果的子集。例如，当我在应用程序中将“亚洲 GPR...”作为搜索查询时，它不会显示亚洲 GPR Multiplex 作为选项:

但是，当我在 Google map 中使用相同的查询字符串时，我得到了所需的结果:

我尝试对此进行了很多搜索，但找不到解决方案。我哪里出错了？

Answer 1

如果您阅读the documentation here它说:

An array of types specifies an explicit type or a type collection, as listed in the supported types below. If nothing is specified, all types are returned. In general only a single type is allowed. The exception is that you can safely mix the geocode and establishment types, but note that this will have the same effect as specifying no types.

所以我想你只需要删除 type 选项，如下所示:

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });

    autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'));
    google.maps.event.addListener(autocomplete2, 'place_changed', function() {
      fillInAddress();
});

或者您可以添加机构类型:

    function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode', 'establishment' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });

    autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode', 'establishment' ] });
    google.maps.event.addListener(autocomplete2, 'place_changed', function() {
      fillInAddress();
});