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

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

javascript

Javascript 为什么我的脚本代码的这一部分被忽略了？,javascript,Javascript,我在控制台中没有收到任何错误，脚本的其余部分也可以工作，但这部分只是被忽略和跳过了。我已经定义了所有的东西，但是它就像在路点VAR中没有数据一样，即使它们是由用户输入的。我得到的是开始和结束的输出，而不是中间的路点。p> 函数initMap（）{ var directionsService=新的google.maps.directionsService； var directionsDisplay=新建google.maps.DirectionsRenderer； var map=new goo

我在控制台中没有收到任何错误，脚本的其余部分也可以工作，但这部分只是被忽略和跳过了。我已经定义了所有的东西，但是它就像在路点VAR中没有数据一样，即使它们是由用户输入的。我得到的是开始和结束的输出，而不是中间的路点。p>

函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：{
拉脱维亚：41.85，
液化天然气：-87.65
}
});
方向显示.setMap（地图）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
计算显示路线（方向服务、方向显示）；
});
}
var航路点1=（“”）；
var航路点2=（“”）；
var航路点3=（“”）；
var航路点4=（“”）；
var wayArray=[（航路点1）、（航路点2）、（航路点3）、（航路点4）]；
var wayArray=‘航路点’
函数calculateAndDisplayRoute（方向服务、方向显示）{
var航路点=[wayArray]；
//var-waypts=[]；
var wayArray=document.getElementsByClassName（'waypoints'）；
对于（变量i=0；i

您可以通过覆盖而不是在末尾添加来重用

wayArray

。因此，请删除/注释小提琴中第18-24行（含）中的全局变量，并用

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

通过目测检查，似乎在大致范围内

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


路点
#右面板{
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
}
#右面板输入{
字体大小：15px；
}
#右面板选择{
宽度：100%；
}
#右面板i{
字体大小：12px；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
浮动：左；
宽度：70%；
身高：100%；
}
#右面板{
利润率：20px；
边框宽度：2倍；
宽度：20%；
浮动：左；
文本对齐：左对齐；
填充顶部：20px；
}
#方向面板{
边缘顶部：20px；
背景色：#FFEE77；
填充：10px；
}
函数initMap（）{
var directionsService=新的google.maps.directionsService；
var directionsDisplay=新建google.maps.DirectionsRenderer；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：{
拉脱维亚：41.85，
液化天然气：-87.65
}
});
方向显示.setMap（地图）；
document.getElementById（'submit'）。addEventListener（'click'，function（）{
计算显示路线（方向服务、方向显示）；
});
}
函数calculateAndDisplayRoute（方向服务、方向显示）{
//更改了类名！
var wayArray=document.getElementsByClassName（'waypoints'）；
var wp=[]；
//覆盖不起作用，改为挂接额外的数组
对于（变量i=0；i”；
summaryPanel.innerHTML+=route.legs[i]。起始地址+'to'；
summaryPanel.innerHTML+=route.legs[i]。结束地址+'
'；
summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}
开始：




航路点：




完:




initMap（）；

注意：

wayArray

不能容纳数组（

=[（waypoints1），…]

）、字符串（

='waypoints'

）和元素集合（

=document.getElements…

）一次完成。试着给每一个使用它们自己的不同变量名。有没有办法创建一个包含航路点1-4的新类名？我一直在网上查找，但到目前为止还没有找到任何方法。我注释掉了您提到的行并替换了内部循环。我还添加了类名航路点并更改了getElements按类名：var wayArray=document.getElementsByClassName（'waypoints waypoints1 waypoints2 waypoints3'）；但它仍然忽略了航路点代码。您还有其他想法吗？您是否检查了航路阵列是否具有正确的数据，或者是否存在错误？您的确切数据是什么，即：开始、结束、四个航路点以使其他人能够重复它？都可以通过汽车到达吗？（据我记忆所及，如果

travelMode

设置为

Google.maps.travelMode.DRIVING

，谷歌会忽略它们，但这可能已经改变）顺便说一句：它必须是

document.getElementsByClassName（'waypoints1 waypoints2 waypoints3 waypoints4'）；

latest

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