我是Java语言的新手，并且迷上了Google Waypoints路线
如何在<select multiple id="waypoints">中从FlaskForm传递数据？使它工作。 {{form.add_1.data}}不起作用。
app.py
from flask import Flask, render_template, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
app = Flask(__name__)
app.config['SECRET_KEY']='secret'
class TestForm(FlaskForm):
start = StringField()
add_1 = StringField()
end = StringField()
submit = SubmitField()
@app.route('/', methods=['POST', 'GET'])
def index():
form = TestForm()
return render_template ('city.html', form=form)
if __name__=='__main__':
app.run(debug=True, port=8000)
模板
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Waypoints in Directions</title>
<style>
</style>
</head>
<body>
<div class="container">
<form action="" method="post">
{{form.start}}
{{form.add_1}}
{{form.end}}
{{form.submit()}}
</form>
</div>
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start</b>
<select id="start">
<option value="{{form.start.data}}">{{form.start.data}}</option>
<option value="Boston, MA">Boston, MA</option>
<option value="New York, NY">New York, NY</option>
<option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
<option value="{{form.add_1.data}}">{{form.add_1.data}}</option>
<option value="toronto, ont">Toronto, ONT</option>
<option value="chicago, il">Chicago</option>
<option value="winnipeg, mb">Winnipeg</option>
<option value="fargo, nd">Fargo</option>
<option value="calgary, ab">Calgary</option>
<option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
<option value="{{form.end.data}}">{{form.end.data}}</option>
<option value="Seattle, WA">Seattle, WA</option>
<option value="San Francisco, CA">San Francisco, CA</option>
<option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
<input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
<script>
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) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
if (checkboxArray.options[i].selected) {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});
}
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === '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>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
</script>
</body>
</html>