Question

我在控制台中没有出现任何错误，并且脚本的其余部分可以正常工作，但是这部分只是被忽略并被跳过。我已经定义了所有内容，但它就像路点var中没有数据一样，即使它们是由用户输入的。我得到的是开始和结束的输出，但不是中间的路点。 Fiddle of the entire code

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);
  });
}

var waypoints1 = ("");
var waypoints2 = ("");
var waypoints3 = ("");
var waypoints4 = ("");

var wayArray = [(waypoints1), (waypoints2), (waypoints3), (waypoints4)];
var wayArray = 'waypoints'

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypoints = [wayArray];
    //var waypts = [];

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

    for (var i = 0; i < wayArray.length; i++) {

      if (wayArray[i].value) {
        wayArray.push({
          location: wayArray[i].value,
          stopover: true
        });
      }
    }

    directionsService.route({
          origin: document.getElementById('start').value,
          destination: document.getElementById('end').value,
          waypoints: wayArray,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING

Answer 1

您可以通过覆盖而不是最后添加来重用wayArray。因此，删除/注释掉小提琴中第18-24行（包括）中的全局变量，并用

替换内部循环

for (var i = 0; i < wayArray.length; i++) {
  if (wayArray[i].value) {
    wayArray[i] = {
      location: wayArray[i].value,
      stopover: true
    };
  }
}

嗯......这让我想知道为什么第一个版本的循环停止了：wayArray.push()使数组更大，因此i < wayArray.length总是为真。啊，班级名waypoints不存在，只有waypoints[1-4] - 你也应该纠正。

编辑：我正在使用stackoverflow软件，所以这是一个工作示例，使用路径进行测试：

来自：明尼阿波利斯，明尼苏达州; 结束：麦迪逊，威斯康星州;伊利诺伊州罗克福德;印第安纳波利斯，IN;俄亥俄州哥伦布市致：宾夕法尼亚州匹兹堡

适用于最新的Firefox / Linux

输出是：

Route Segment: 1
Minneapolis, MN, USA to Madison, WI, USA
268 mi

Route Segment: 2
Madison, WI, USA to Rockford, IL, USA
73.2 mi

Route Segment: 3
Rockford, IL, USA to Indianapolis, IN, USA
272 mi

Route Segment: 4
Indianapolis, IN, USA to Columbus, OH, USA
175 mi

Route Segment: 5
Columbus, OH, USA to Pittsburgh, PA, USA
185 mi

通过眼球检查，似乎是在球场。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Waypoints</title>
<style type="text/css">
#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#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>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqkH9U10wjgseSMBV07LmZETO5VQOT1Lw&callback=initMap">
</script>
<script type="text/javascript">
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) {
  // changed classnames!
  var wayArray = document.getElementsByClassName('waypoints');
  var wp = [];
  // overwriting did not work, tokk extra array instead
  for (var i = 0; i < wayArray.length; i++) {
    if (wayArray[i].value) {
      var tmp = wayArray[i].value;
      wp[i] = {
        location: tmp,
        stopover: true
      };
    }
  }
console.log(JSON.stringify(wp));
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: wp,
    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('Directions request failed due to ' + status);
    }
  });
}

</script>
</head>
<body>
  <div id="map"></div>
  <div id="right-panel">
    <div>
      <b>Start:</b>
      <br>
      <input id="start" type="text" value="">
      <br>
      <b>Waypoints:</b>
      <br>
      <input type="text" class="waypoints" value="">
      <input type="text" class="waypoints" value="">
      <input type="text" class="waypoints" value="">
      <input type="text" class="waypoints" value="">
      <br>
      <b>End:</b>
      </br>
      <input id="end" type="text" value="">
      <br>
      <input id="submit" type="submit">
    </div>
    <div id="directions-panel"></div>
  </div>
    <script type="text/javascript">
      initMap();
    </script>
</body>
</html>

为什么我的脚本代码的这一部分被忽略了？

1 个答案: