Читать Google Maps Автозаполнение внутри таблицы - PullRequest
Новая
       17

Читать Google Maps Автозаполнение внутри таблицы

0 голосов
/ 08 февраля 2019

У меня есть страница для расчета поездок / платных дорог, на которой пользователь вводит точку отправления, пункт назначения и путевые точки, чтобы зайти на них.Мне удалось динамически вставить входные тексты в таблицу с помощью JS / Jquery и назначить их для автозаполнения Google Maps.Все хорошо и работает до тех пор, пока здесь.

Я могу добавить / удалить / отсортировать строки, и Автозаполнение Google отлично работает на всех входах.Я также сделал цикл foreach, чтобы получить каждую строку таблицы, а затем попытался прочитать из нее значение автозаполнения, но все, что я могу получить, - это входное значение, а не значения автозаполнения. 

$('#tblInterm > tbody  > tr').each(function ()
{
    console.log(this.closest('input').val());
});

Дело в том, что эту таблицу можно перетаскивать и сортировать так, как этого хочет пользователь, поэтому порядок точек можно и будет изменять (в значительной степени, как и в самих Google Картах).

Что мне нужно, так этоспособ чтения каждого из входов / автозаполнений в таблице, чтобы получить информацию LatLng и рассчитать поездку / пошлину на основе пользовательских данных. 

//Searchs limited to Brazil only
var options = {
  componentRestrictions: {
    country: 'br'
  }
};

$(document).ready(function() {
  //Make the table  sortable
  $("#tblInterm tbody").sortable({
    items: "> tr",
    appendTo: "parent",
    helper: "clone"
  }).disableSelection();

  //Add initial row to table
  Add();
});

//Array of waypoints and quantity control
var parada = [];
var p = 1;

//Add new waypoints
function Add() {
  //Create a input
  var inputParada = $('<input/>', {
    id: 'txtParada' + p,
    class: 'form-control',
    type: 'search',
    style: 'margin: 0; padding: 0; width: 100%; ',
    placeholder: 'Endereço de parada'
  });

  //Insert a line in the table with the input and the delete an the add buttons
  var tr = $('<tr/>');
  tr.append('<td style="width: 80%; height: 26px; padding: 3px 0; ">' + inputParada[0].outerHTML + '</td>');
  tr.append('<td style="width: 20px; height: 20px; padding: 4px; "><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFAG1e-_hfzLhssYiBssNc2JNBrL0aihBIavwXkGpAcrG_UfpV" class="btnDelete" height="20px"/></td>');
  tr.append('<td style="width: 20px; height: 20px; padding: 4px; "><img src="https://www.ipuc.org.co/ImagenesFuentes/iVista_Pack/PNG/Alarm/Plus.png" class="btnAdd" height="18px"/></td>');

  //Append the row to the table
  $('#tblInterm tbody').append(tr);

  //Bind delete event
  $(".btnDelete").unbind('click');
  $(".btnDelete").bind('click', Delete);

  //Bind add event
  $(".btnAdd").unbind('click');
  $(".btnAdd").bind('click', Add);

  //Make the input a Autocomplete field
  inputParada.click(function() {
    var autoParada = new google.maps.places.Autocomplete(document.getElementById($(this)[0].id), options);
  }).click();

  //Track the amount of created rows
  p++;
}

//Delete the row
function Delete() {
  $(this).closest('tr').remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
</head>
<body>
  <div>
    <table id="tblInterm" class="table table-hover">
      <tbody></tbody>
    </table>
  </div>
</body>

Заранее спасибо.

...