Question

我在这里有一个半功能旅行计划员：

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

源代码：

   <!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>

第一个＆＃34;添加一个＆＃34;按钮是一个按钮，第二个是输入。我使用输入来添加列表项但是自动完成没有工作，我在this question中得到了建议，添加了你看到的按钮点击工作的jQuery。

当我评论＆＃34;添加一个！＆＃34;输入＆＃34;计划它！＆＃34;输入停止工作。如果您知道为什么会这样，请提前感谢您。

我的主要问题是旅行计划者没有采用航路点并将其包含在路线中。代码应该从#waypoints中获取每个项目并将其推送到waypts数组以允许Google进行路由。但是当用户提交＆＃34;计划它时，只包括起点和终点！＆＃34;输入。如何将航路点包含在路线中？

如果有一种方法可以使用输入而不是按钮添加列表项以与我的其他输入保持一致，并且可以在没有jquery的情况下执行此操作，这将是很好的，因为我正在学习javascript并且发现jquery有点令人困惑但是除了没有用一种可以推送到路标的方式填充#waypoints之外，它似乎正在起作用。谢谢。

Answer 1

以下是您需要在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
        });
    }
}

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

新生成的ul li输入值未被推入路点阵列/不使用谷歌地图会自动完成

1 个答案: