Google地图中的Waypoints代码

关注

发信

关注(28)粉丝(399)

Google地图中的Waypoints代码

本文介绍了Google地图中的Waypoints代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am using a html form to get inputs of 3 zip-codes (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>

I want to plot the path bfrom PortZip to PortZip via ExporterZip. The code below-

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

}

Is the waypoints formulation right? This code is not leading to any result. If I run the code without waypoints:waypts, it works. What's wrong with my code?

解决方案

A Waypoint is a javascript anonymous object, the waypoints property of the directions request should be an array of waypoint objects (like you had in your last question on this). If you run that code you get a javascript error: 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);
    }
  });

}

code snippet:

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

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

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

这篇关于Google地图中的Waypoints代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-20 15:59