Код путевых точек в Google maps

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> 

Я хочу построить путь от PortZip до PortZip через ExporterZip. Код, указанный ниже:

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

A Waypoint является анонимным объектом javascript, свойство запроса на маршрут должно быть массивом объектов путевой точки (например, у вас в вашем last question on this). Если запустить этот код вы получите яваскрипта ошибку: 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); 
    } 
    }); 

} 

фрагмент кода:

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>