新生成的ul li输入值未被推入航点数组/不适用于Google Maps地点自动填充

Question

I have a semi-functional trip planner here: 我在这里有一个半功能的旅行计划器：

http://roadtripsharing.com/plan-a-road-trip-js/ http://roadtripsharing.com/plan-a-road-trip-js/

Source code: 源代码：

   <!DOCTYPE html>
<html>
  <head>

    <style>
      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 70%;
        height: 100%;
      }
      #right-panel {
        margin: 20px;
        border-width: 2px;
        width: 20%;
        float: left;
        text-align: left;
        padding-top: 20px;
      }
      #directions-panel {
        margin-top: 20px;
        background-color: #FFEE77;
        padding: 10px;
      }
    </style>
  </head>
  <body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

    <div id="map"></div>
    <div id="right-panel">
    <div>
    <b>Start:</b>
    <input id="start" placeholder="Where to begin?" onFocus="geolocate()" type="text" />    
    <br>
    <b>Waypoints:</b>
    <br>
    <ul style="list-style-type:none; padding: 0; margin: 0;" id="waypoints">
</ul>
    <button id="newAutocomplete">Add One</button>


    <input type="submit" id="addplace" value="Add One!">  


    <br>
    <b>End:</b>
    <br>
    <input id="end" placeholder="Where to end?" onFocus="geolocate()" type="text" />
    <br>
    <input type="submit" id="submit" value="Plan It!">
  </div>
  <div id="directions-panel"></div>
</div>

    <script>
      function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 39.6,
      lng: -106.5
    }
  });
  directionsDisplay.setMap(map);

  var start = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('start')), {
      types: ['geocode']
    });

  var end = new google.maps.places.Autocomplete(
    /** @type {!HTMLInputElement} */
    (document.getElementById('end')), {
      types: ['geocode']
    });

  document.getElementById('addplace').addEventListener('click', function() {
    addplace();
  });

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

var totalAC = 0; 
$(document).on('click', "#waypoints input[type=text]",function () {
    var currentInp = $(this).attr("id");
    var placeBox = new google.maps.places.Autocomplete(document.getElementById(currentInp));
});

$("#newAutocomplete").click(function(){
    totalAC = $("#waypoints input").length;
    totalAC = totalAC + 1;
    var codeVar = "<li><input id='place" + totalAC + "' placeholder='Come visit!' type='text' /></li>";
    $("#waypoints").append(codeVar);
});

<!--
var j=0;
function addplace () {
  var node = document.createElement("li");                 // Create a <li> node
  var textnode = document.createTextNode("<b>Waypoint</b>");         // Create a text node
  node.appendChild(textnode);                              // Append the text to <li>
  document.getElementById("waypoints").appendChild(node);
}  
-->

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
      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: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.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>Route Segment: ' + routeSegment +
          '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Error! Do your dots connect?');
    }
  });
}

google.maps.event.addDomListener(window, 'load', initMap);
    </script>
  </body>
</html>

The first "Add One" button is a button and the second one is an input. 第一个“添加一个”按钮是一个按钮，第二个是输入。 I was using the input to add list items but the autocomplete didn't work and i got the advice in this question to add the jQuery you see working for the button click. 我正在使用输入来添加列表项，但是自动完成功能不起作用，并且我在此问题中得到了建议，以添加您看到的用于按钮单击的jQuery。

When I comment out the "Add One!" 当我注释掉“添加一个！”时 input the "Plan It!" 输入“计划！” input stops working. 输入停止工作。 If you know why that would be, thank you in advance. 如果您知道原因，请提前谢谢。

My main issue is that the trip planner is not taking the waypoints and including them in the route. 我的主要问题是旅行计划者没有采用路标并将其包括在路线中。 The code should be taking each item from #waypoints and pushing it into waypts array to allow Google to do the routing. 代码应从#waypoints中获取每个项目并将其推入waypts数组，以允许Google进行路由。 But only start and end points are included when user submits the "Plan It!" 但是，当用户提交“计划”时，仅包含起点和终点。 input. 输入。 How to make the waypoints be included in the route? 如何使航路点包含在路线中？

If there is a way to add the list items with an input rather than a button for consistency with my other inputs and a way to do it without jquery that would be great as i am learning javascript and finding jquery a little confusing though it seems to be working other than not populating #waypoints with items in a way that can be pushed to waypts. 如果有一种方法可以使用输入而不是按钮来添加列表项，以便与我的其他输入保持一致，并且没有jquery的话可以做到这一点，因为我正在学习javascript并发现jquery有点令人困惑，但这似乎很棒。除了不以可推入路标的方式向#waypoint填充物品以外，还需要进行其他工作。 Thanks. 谢谢。

Answer 1

Here are few changes you need to make in your JS, I already did for you- 这是您需要在JS中进行的一些更改，我已经为您做了-

var waypts = [];  
function addplace() {
    var inps = $('#waypoints input[type=text]');
    for (var i = 1; i <= inps.length; i++) {
        var a = $('#waypoints input[type=text]#place'+i);
        waypts.push({
          location: a.val(),
          stopover: true
        });
    }
}

check this- http://codepen.io/himanshuapril1/pen/RaQLgv 检查此-http ://codepen.io/himanshuapril1/pen/RaQLgv

新生成的ul li输入值未被推入航点数组/不适用于Google Maps地点自动填充

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-11 17:03:13

新生成的ul li输入值未被推入航点数组/不适用于Google Maps地点自动填充

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-11 17:03:13

解决方案1
1 已采纳 2016-04-11 17:03:13