0

我有一个输入表单，允许用户创建一条包含起点、终点和 8 个航路点的路线。一切正常，但我的问题是必须填写所有输入才能渲染路线。我不知道如何解决此问题，以便用户只能输入：

  1. 起点和终点，或
  2. 起点和终点以及航点（根据需要，不超过 8 个，以创建路线）。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title></title>
<link href="map_style.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(37.09, -95.71);
    var mapOptions = {
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var stop1 = document.getElementById("stop1").value;
    var stop2 = document.getElementById("stop2").value;
    var stop3 = document.getElementById("stop3").value;
    var stop4 = document.getElementById("stop4").value;
    var stop5 = document.getElementById("stop5").value;
    var stop6 = document.getElementById("stop6").value;
    var stop7 = document.getElementById("stop7").value;
    var stop8 = document.getElementById("stop8").value;
    var waypts= [{ location: stop1 }, { location: stop2 }, { location: stop3 },  { location: stop4 },  { location: stop5 },  { location: stop6 },  { location: stop7 },  { location: stop8 }];


    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, 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>';
        }
      }
    });
  }
 </script>
 </head>
 <body onload="initialize()">
<div id="map-canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<div style="margin:20px;border-width:2px;">

<label for="start">Start :</label>
  <input type="text" id="start" name="start" /><br /><br />

<i>Add multiple Stops along the route (Optional)</i> <br /><br />
<label for="stop1">Stop 1 :</label>
  <input type="text" id="stop1" name="stop1" /><br />
<label for="stop2">Stop 2 :</label>
  <input type="text" id="stop2" name="stop2" /><br />
<label for="stop3">Stop 3 :</label>
  <input type="text" id="stop3" name="stop3" /><br />
<label for="stop4">Stop 4 :</label>
  <input type="text" id="stop4" name="stop4" /><br />
<label for="stop4">Stop 5 :</label>
  <input type="text" id="stop5" name="stop5" /><br />
<label for="stop6">Stop 6 :</label>
  <input type="text" id="stop6" name="stop6" /><br />
<label for="stop7">Stop 7 :</label>
  <input type="text" id="stop7" name="stop7" /><br />
<label for="stop8">Stop 8 :</label>
  <input type="text" id="stop8" name="stop8" /><br /><br />


<label for="end">Stop :</label>
  <input type="text" id="end" name="end" /><br />
<br />
  <input type="submit" value="Create Route" onclick="calcRoute();">
 </div>
 <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
 </div>
 </body>
 </html>
4

1 回答 1

0

检查空字段并在那里复制前一个字段的值。当它被渲染时，你会有许多相互重叠的航点，但我怀疑你看不到。这可能是需要对您的代码进行最少更改的方法。更广泛的更改将使表单动态化，在用户填写时添加更多字段。

下面的代码片段似乎接近你想要的......我用一个和两个航点测试了它，它表现得很好。我仍然无法让地图渲染 - 但我相信这是由于与 .css 文件相关的另一个问题（您的评论中的格式有点混乱......）

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;    
    var waypts = [];
    for (var ii = 0; ii< 8; ii++) {      
        var thisStop = document.getElementById("stop" + (ii+1)).value;
        if (thisStop.length > 0) {
            waypts[ii] = {location: thisStop};
        }
    }

// 接下来的几行被删除；再次从以下位置获取：

var request = {
于 2013-03-30T19:07:29.187 回答