0

Есть два скрипта js:

1-ый добавляет и удаляет input-ы:

$(document).ready(function() {
    var max_fields      = 7;
    var wrapper         = $(".row");
    var add_button      = $(".click");

    var x = 1;

    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div id="del">\n' +
                '                    <div class="col-lg-8">\n' +
                '                        <div><input type="text" id="waypoints2" class="form-control"></div>\n' +
                '                    </div>\n' +
                '                    <div class="col-lg-4">\n' +
                '                        <button class="btn delete">Удалить поле</button>\n' +
                '                    </div>\n' +
                '                </div>');
        }
  else
  {
  alert('Запрещено использовать более семи точек.')
  }
    });

    $(wrapper).on("click",".delete", function(e){
        e.preventDefault();
        $('#del').remove(); x--;
    })
});

2-ой делает автозаполнение input-ов и считает расстояние:

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: 61.5240, lng: 100.3188}
    });
    directionsDisplay.setMap(map);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });

    new AutocompleteDirectionsHandler(map);
  }



  function AutocompleteDirectionsHandler() {
    var originInput = document.getElementById('start');
    var destinationInput = document.getElementById('end');
    var waypointsInput = document.getElementById('waypoints');

    var originAutocomplete = new google.maps.places.Autocomplete(
        originInput, {placeIdOnly: true});
    var destinationAutocomplete = new google.maps.places.Autocomplete(
        destinationInput, {placeIdOnly: true});
    var waypointsAutocomplete = new google.maps.places.Autocomplete(
        waypointsInput, {placeIdOnly: true});
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    var checkboxArray = document.getElementById('waypoints');
    for (var i = 0; i < checkboxArray.length; i++) {
      if (checkboxArray.options[i].selected) {
        waypts.push({
          location: checkboxArray[i].value,
          stopover: true
        });
      }
    }


    directionsService.route({
      origin: document.getElementById('start').value,
      destination: document.getElementById('end').value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'WALKING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += '<b>Направление №: ' + routeSegment +
              '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' до ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
      } else {
        window.alert('Запрос на рассчет не выполнен из за: ' + status);
      }
    });
  }

Вопрос? Как заставить подгружаться автозаполнению в динамически ново-созданном input-е?

$(document).ready(function() {
        var max_fields      = 7;
        var wrapper         = $(".row");
        var add_button      = $(".click");

        var x = 1;

        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div id="del">\n' +
                    '                    <div class="col-lg-8">\n' +
                    '                        <div><input type="text" id="waypoints2" class="form-control"></div>\n' +
                    '                    </div>\n' +
                    '                    <div class="col-lg-4">\n' +
                    '                        <button class="btn delete">Удалить поле</button>\n' +
                    '                    </div>\n' +
                    '                </div>');
            }
      else
      {
      alert('Запрещено использовать более семи точек.')
      }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault();
            $('#del').remove(); x--;
        })
    });

function initMap() {
  
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 61.5240, lng: 100.3188}
        });
        directionsDisplay.setMap(map);

        document.getElementById('submit').addEventListener('click', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });

		new AutocompleteDirectionsHandler(map);
      }



	  function AutocompleteDirectionsHandler() {
        var originInput = document.getElementById('start');
        var destinationInput = document.getElementById('end');
        var waypointsInput = document.getElementById('waypoints');
        var waypoints2Input = document.getElementById('waypoints2');

        var originAutocomplete = new google.maps.places.Autocomplete(
            originInput, {placeIdOnly: true});
        var destinationAutocomplete = new google.maps.places.Autocomplete(
            destinationInput, {placeIdOnly: true});
        var waypointsAutocomplete = new google.maps.places.Autocomplete(
            waypointsInput, {placeIdOnly: true});
        var waypoints2Autocomplete = new google.maps.places.Autocomplete(
            waypoints2Input, {placeIdOnly: true});
      }
	  
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
        //
        waypts.push({
              location: document.getElementById('waypoints').value,
              stopover: true
          });

        //
        for (var i = 0; i < checkboxArray.length; i++) {
          if (checkboxArray.options[i].selected) {
            waypts.push({
              location: checkboxArray[i].value,
              stopover: true
            });
          }
        }


        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions-panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Направление №: ' + routeSegment +
                  '</b><br>';
              summaryPanel.innerHTML += route.legs[i].start_address + ' - ';
              summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
              summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            }
          } else {
            window.alert('Запрос на рассчет не выполнен из за: ' + status);
          }
        });
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-index">

    <div class="body-content">

        <div id="map" hidden></div>
        <div id="right-panel">
            <div>
                <h3>Начальная точка:</h3>
                <input id="start" class="form-control" type="text">
                <br>
                <h3>Промежуточные точки:</h3>



                <div class="row">
                    <div class="col-lg-8">
                        <div><input type="text" id="waypoints" class="form-control"></div>
                    </div>
                    <div class="col-lg-4">
                        <button class="click">Добавить поле</button>
                    </div>
                </div>
                
              
                <br>
                <h3>Конечная точка:</h3>
                <input id="end" class="form-control" type="text">
                <br>
                <button type="submit" id="submit" class="btn btn-success">Рассчитать</button>
                
            </div>
            <br>
            <div id="directions-panel"></div>
        </div>
    </div>

</div>

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

2
  • Не хватает демки. Можно сделать например тут codepen.io или тут codesandbox.io 4 дек 2018 в 15:15
  • @Pavel, добавил рабочую демку. 5 дек 2018 в 4:38

1 ответ 1

0

//js-number-1
$(document).ready(function() {
        var add           = $('.add');
        var wrapper       = $('.row');
        var max_component = 7;
        var count         = 1;

        $(add).click(function(e)
        {
            e.preventDefault();
            if (count <= max_component)
            {
                $(wrapper).append('<div id="del"><div style="margin-top: 20px" class="col-lg-8">\n' +
                    '                        <div><input type="text" class="form-control js-form-input"></div>\n' +
                    '                    </div>\n' +
                    '                    <div style="margin-top: 20px" class="col-lg-4">\n' +
                    '                        <button id="id" class="btn delete">Удалить поле</button>\n' +
                    '                    </div>\n' +
                    '                </div></div>');

                new AutocompleteDirectionsHandler();
                count++;
            }
            else
            {
                alert('Максимальное кол-во дополнительных не должно быть более 8-ми');
            }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault();
            $('#del').remove(); count--;
        })

    });
//js-number-2
function initMap() {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 61.5240, lng: 100.3188}
        });
        directionsDisplay.setMap(map);

        document.getElementById('submit').addEventListener('click', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });

        new AutocompleteDirectionsHandler();
      }

	  function AutocompleteDirectionsHandler() {
        var originInput = document.getElementById('start');
        var destinationInput = document.getElementById('end');
          var originAutocomplete = new google.maps.places.Autocomplete(
              originInput, {placeIdOnly: true});
          var destinationAutocomplete = new google.maps.places.Autocomplete(
              destinationInput, {placeIdOnly: true});

        document.querySelectorAll('.js-form-input').forEach(function (item) {
            new google.maps.places.Autocomplete(
                item, {placeIdOnly: true});
        });

      }
	  
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];

       document.querySelectorAll('.js-form-input').forEach(function (item) {
           if (item.value) {
               waypts.push({
                   location: item.value,
                   stopover: true
               });
           }
       });

        directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'WALKING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
            var summaryPanel = document.getElementById('directions-panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++) {
              var routeSegment = i + 1;
              summaryPanel.innerHTML += '<b>Направление №: ' + routeSegment +
                  '</b><br>';
              summaryPanel.innerHTML += route.legs[i].start_address + ' - ';
              summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
              summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
            }
          } else {
            window.alert('Запрос на рассчет не выполнен из за: ' + status);
          }
        });
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-content">

        <div id="map" hidden></div>
        <div id="right-panel">
            <div>
                <h3>Начальная точка:</h3>
                <input id="start" class="form-control" type="text">
                <br>
                <h3>Промежуточные точки:</h3>



                <div class="row">
                    <div class="col-lg-8">
                        <div><input type="text" class="form-control js-form-input"></div>
                    </div>
                    <div class="col-lg-4">
                        <button id="id" class="btn add">Добавить поле</button>
                    </div>
                </div>
                <br>
                <h3>Конечная точка:</h3>
                <input id="end" class="form-control" type="text">
                <br>
                <button type="submit" id="submit" class="btn btn-success">Рассчитать</button>
            </div>
            <br>
            <div id="directions-panel"></div>
        </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD8lc7goRNw3K0HJD6sTzRXhoWvcFpx3rg&libraries=places&callback=initMap"
        async defer></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.