谷歌地图从输入文本字段标记航点起点和终点

Question

我想使用此代码从输入文本字段中标记谷歌地图上的航点。目前，此代码从多个可选框中获取输入。我想要起点和所有 5 个航点作为输入文本字段。

    <div id="mp">
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>

   <input id="start" type="text">

<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
  <option value="perinthalmanna">perinthalmanna</option>
  <option value="manjery">manjery</option>

</select>
<br>
<b>End:</b>

  <input id="end" type="text">

<br>
  <input type="submit" id="submit">
</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: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);

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

  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: 'DRIVING'
    }, 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>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('Directions request failed due to ' + status);
      }
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API-HERE&callback=initMap">
</script>
        </div>

Answer 1

1. 在您的 HTML 中使用 class 以允许通过单个查询获取多个 <input> 元素

var checkboxArray = document.getElementsByClassName('waypoints');

1. 让您的代码更加健壮，以便处理空输入元素：

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

proof of concept fiddle

代码 sn-p：

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: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);

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

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

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, 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>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('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map,
#mp {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mp">
  <div id="right-panel">
    <div>
      <b>Start:</b>
      <input id="start" type="text" value="Cleveland, OH"><br>
      <b>Waypoints:</b><br>
      <input class="waypoints" value="Ann Arbor, MI" /><br>
      <input class="waypoints" value="Ft Wayne, IN" /><br>
      <input class="waypoints" value="Chicago, IL" /><br>
      <input class="waypoints" value="Rockford, IL" /><br>
      <input class="waypoints" value="Cedar Rapids, IA" /><br><br>
      <b>End:</b>
      <input id="end" type="text" value="Des Moines, IA"><br>
      <input type="submit" id="submit">
    </div>
  </div>
  <div id="map"></div>
  <div id="directions-panel"></div>