Rails google places api地址自动补全。将地址值传递给@model

Question

我需要将地址、城市、邮政编码等地址值传递给我的@model，在那里我有字段来容纳这些值。

我一直在努力尝试许多不同的东西，包括一些看起来像中国人的ajax……，最近3天。我需要帮助。如果你有时间，似乎有很多人在为同样的问题而苦苦挣扎。如果有人能提供完整的解决方案/教程，我将不胜感激。

自动补全可以很好地工作，用不同的元素值填充google字段。我想我可以使用erb hidden_fields并将html值赋给我的erb表单域，但我无法让它工作。

在我常规的erb表单中，我有Google Places API web表单：

Start Address auto-complete 
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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>


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

<table id="address">
  <tr>
    <td class="label">Calle</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">Ciudad</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Provincia</td>
    <td class="wideField" colspan="3"><input class="field" id="administrative_area_level_2"
          disabled="true"></input></td>
  </tr>

  <tr>
    <td class="label">subloc</td>
    <td class="wideField" colspan="3"><input class="field" id="sublocality"
          disabled="true"></input></td>
  </tr>

  <tr>
    <td class="label">geocode</td>
    <td class="wideField" colspan="3"><input class="field" id="geocode"
          disabled="true"></input></td>
  </tr>

  <tr>
    <td class="label">neighborhood</td>
    <td class="wideField" colspan="3"><input class="field" id="neighborhood"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">street address</td>
    <td class="wideField" colspan="3"><input class="field" id="street_address"
          disabled="true"></input></td>
  </tr>

  <tr>
    <td class="label"></td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Codigo Postal</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Pais</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>


 <!-- 
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&libraries=places"></script>
-->

  <script type="text/javascript">
  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'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  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;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>



<script src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&libraries=places&callback=initAutocomplete"
    async defer></script>


<!-- End Address auto-complete -->

Answer 1

如果您在address_attributes中使用了正确的数据，这里有一个简单的示例。

$(function () { 
    $("#address").geocomplete({
      details: ".geo-details",
      detailsAttribute: "geo"
    });
});

$(function () { 
    $("#address")
        .geocomplete()
        .bind("geocode:result", function (event, result) {                      
            b = result
            a = result.address_components
            for ( var i = 0, l = a.length; i < l; i++ ) {
                if (a[i].types.indexOf("country") > -1)
                {
                    $('#address_line').val(a[i].long_name)
                }
                if (a[i].types.indexOf("postal_code") > -1)
                {
                    $('#zipcode').val(a[i].long_name)
                }
                if (a[i].types.indexOf('administrative_area_level_1') > -1)
                {
                    $('#state').val(a[i].long_name)
                }

            }
                $("#latitude").val(result.geometry.location.lat());
                $("#longitude").val(result.geometry.location.lng());
    });
});

则该表单应包含，address_line, zipcode, state, latitude, and longitude id元素

Answer 2

我最终用simple_form Gem解决了这个问题

这是我的代码。我将整个地址收集在一个字段中(用逗号分隔)，然后再分别收集所有不同的元素。由于我的布局，我使用了隐藏的erb输入，但如果您删除'，:as => : hidden‘部分，它们将实时填充。

希望这对你们中的一些人有帮助，这对我来说是一个很难解决的问题！享受吧！！

<%= simple_form_for(@mymodel) do |f| %>

<!-- The order of erb inputs before html inputs seems to be important! had problems changing it and couldnt remove html inputs either.  -->

<%= f.input :my_model_address, :label => "Direccion", :input_html =>{:id => 'autocomplete'}, :placeholder => 'Empieza con el nombre de la calle...' %>
<%= f.input :my_model_street, :as => :hidden, :as => :hidden, :input_html =>{:id => 'route'} %>
<%= f.input :my_model_street_number, :as => :hidden, :input_html =>{:id => 'street_number'} %>
<%= f.input :my_model_postal_code, :as => :hidden, :input_html =>{:id => 'postal_code'} %>
<%= f.input :my_model_city, :as => :hidden, :input_html =>{:id => 'locality'} %>
<%= f.input :my_model_state, :as => :hidden, :input_html =>{:id => 'administrative_area_level_2'} %>
<%= f.input :my_model_country, :as => :hidden, :input_html =>{:id => 'country'} %>

<input type="hidden" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
<input type="hidden" class="field" id="street_number" disabled="true"></input>
<input type="hidden" class="field" id="route" disabled="true"></input>
<input type="hidden" class="field" id="locality" disabled="true"></input>
<input type="hidden" class="field" id="administrative_area_level_2" disabled="true"></input>
<input type="hidden" class="field" id="street_address" disabled="true"></input></td>
<input type="hidden" class="field" id="administrative_area_level_1" disabled="true"></input></td>
<input type="hidden" class="field" id="postal_code" disabled="true"></input></td>
<input type="hidden" class="field" id="country" disabled="true"></input></td>

<script type="text/javascript">
  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'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  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;
      }
    }
  }

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        var circle = new google.maps.Circle({
          center: geolocation,
          radius: position.coords.accuracy
        });
        autocomplete.setBounds(circle.getBounds());
      });
    }
  }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete"
    async defer></script>

<!-- End Address auto-complete -->