Question

我使用html表单获取3个邮政编码的输入（PortZip，ImporterZip，ExporterZip）。

<form>
Calculation of OUT OF ROUTE DISTANCE.<br>
Enter 5 digit VALID US ZipCodes<br><br>
Port ZipCode:<br>
<input type="text" id="PortZip" value="31402">
<br><br>
Importer ZipCode:<br>
<input type="text" id="ImporterZip" value="30308">
<br><br>
Exporter ZipCode:<br>
<input type="text" id="ExporterZip" value="30901">
<br><br>

<input type="button" value="Calculate" onclick="calcRoute()" />
</form>

我想通过ExporterZip绘制从PortZip到PortZip的路径b。下面的代码 -

function calcRoute() {
  var start = document.getElementById('PortZip').value;
  var end = document.getElementById('ImporterZip').value;
  var waypts = document.getElementById('ExporterZip').value;

  var request = {
      origin:start,
      destination:end,
      waypoints:waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

航点制定是否正确？此代码不会导致任何结果。如果我在没有waypoints:waypts的情况下运行代码，它就可以了。我的代码出了什么问题？

Answer 1

Waypoint是一个javascript匿名对象，路径请求的waypoints属性应该是一个路点对象数组（就像你在last question on this中一样）。如果您运行该代码，则会出现javascript错误：Uncaught InvalidValueError: in property waypoints: not an Array

function calcRoute() {
  var start = document.getElementById('PortZip').value;
  var end = document.getElementById('ImporterZip').value;
  var waypts = [{location:document.getElementById('ExporterZip').value}];;

  var request = {
      origin:start,
      destination:end,
      waypoints:waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

代码段

＆＃13;

var map;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {
  //CONVERT THE MAP DIV TO A FULLY-FUNCTIONAL GOOGLE MAP
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('PortZip').value;
  var end = document.getElementById('ImporterZip').value;
  var waypts = [{
    location: document.getElementById('ExporterZip').value
  }];;

  var request = {
    origin: start,
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}
google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<form>Calculation of OUT OF ROUTE DISTANCE.
  <br />Enter 5 digit VALID US ZipCodes
  <br />
  <br />Port ZipCode:
  <br />
  <input type="text" id="PortZip" value="31402" />
  <br />
  <br />Importer ZipCode:
  <br>
  <input type="text" id="ImporterZip" value="30308" />
  <br />
  <br />Exporter ZipCode:
  <br />
  <input type="text" id="ExporterZip" value="30901" />
  <br />
  <br />
  <input type="button" value="Calculate" onclick="calcRoute()" />
</form>
<div id="map_canvas"></div>

＆＃13;

Google地图中的航点代码

1 个答案: