Python 谷歌地图方向API计算错误路线

我正在使用Flask和Google Maps Directions API创建一个web应用程序，在这里我要求用户输入起点、航路点和目的地，并将这些数据传递给Google API，以呈现一张说明用户路线的地图。但是，无论这些数据点是什么，API都会将所有3个数据点解释为一个位置，并相应地渲染地图。渲染的贴图是 ，你也可以看到这个错误的地址是什么

相关源文件如下： run.py（在这里我调用我的模板以在“/finalize\u new\u trip”路径中呈现Google地图）：

从os.path导入abspath、dirname、join
从flask导入flash、flask、标记、重定向、呈现模板、url、请求
从flask.ext.sqlalchemy导入sqlalchemy
来自flask_wtf进口FlaskForm
从wtforms导入StringField
需要从wtforms.validators导入数据
导入操作系统
导入谷歌地图
从日期时间导入日期时间
导入json
_cwd=dirname（abspath（_文件__））
密钥='flask会话不安全密钥'
SQLALCHEMY_DATABASE_URI='sqlite://'+join（'u cwd，'TripLogger.db'））
SQLALCHEMY_ECHO=True
WTF_CSRF_SECRET_KEY='这应该是更随机的'#TODO:随机化此密钥
app=烧瓶（名称）
app.config.from\u对象（\u名称\u）
db=SQLAlchemy（应用程序）
班次（db.Model）：
__tablename_uu='trips'
id=db.Column（db.Integer，主键=True）
trip_name=db.Column（db.String，unique=True）
origin=db.Column（db.String）
destination=db.Column（db.String）
waypoints=db.Column（db.String）#查看另一种数据类型是否更好-理想情况下，希望存储字符串列表
定义初始（自身、行程名称、起点、目的地、航路点）：
self.trip\u name=trip\u name
self.origin=origin
self.destination=目的地
self.waypoints=航路点
定义报告（自我）：
返回“”%（self.id、self.trip\u名称、self.origin、self.destination）
定义（自我）：
返回self.trip\u名称
#考虑自定义验证器，以确保TRIP_名称对于特定用户/帐户是唯一的
三级形状（瓶形）：
trip_name=StringField（'trip name'，验证器=[DataRequired（）]））
origin=StringField（'origin'，验证器=[DataRequired（）]））
destination=StringField（'destination'，validators=[DataRequired（）]））
航路点=StringField（“航路点”）
@app.route（“/”，methods=[“GET”，“POST”]）
def index（）：
trip_form=TripForm（request.form）
如果trip_form.validate_on_submit（）：
flash（“提交的新行程表单，现在重定向到/完成新行程以渲染地图…”）
返回重定向（url_for（“完成_行程”，行程名称=行程形式.trip_名称.data，起点=行程形式.origin.data，终点=行程形式.destination.data，航路点=行程形式.waypoints.data））
返回渲染模板（“index.html”，trip\u form=trip\u form）
#在地图上显示行程的路线（将来修改行程详细信息，如航路点）
@app.route（“/finalize\u new\u trip”，方法=[“POST”]）
def完成_行程（）：
返回呈现模板（“finish\u new\u trip.html”，trip\u name=request.args.get（“trip\u name”），origin=request.args.get（“origin”），destination=request.args.get（“destination”），waypoints=request.args.get（“waypoints”））
#在数据库中存储新的出行数据
@app.route（“/store\u trip”，方法=[“POST”]）
def store_trip（）：
跳闸数据=请求表（“跳闸数据”）
返回json.loads（trip_数据）[0]
def查询到列表（查询，包括字段名称=True）：
“”“将SQLAlchemy查询转换为数据值列表。”“”
列名称=[]
对于i，枚举中的obj（query.all（））：
如果i==0：
column_names=[obj.\u表\u.columns中c的c.name]
如果包含\u字段\u名称：
产生列名
将对象列表（对象、列名称）转换为对象列表
定义对象到对象列表（对象、字段顺序）：
“”“获取SQLAlchemy对象-返回其所有数据的列表”“”
返回[getattr（sa_obj，field_name，None）作为字段_顺序中的字段_name]
如果名称=“\uuuuu main\uuuuuuuu”：
app.debug=True
db.create_all（）
app.run（）

finish_new_trip.html（使用Google Maps API渲染地图的模板）：

完成新的旅行
{{trip_name}}
//将数据传递回服务器的AJAX POST请求的包装器函数。
/*函数passTripData（）{
document.getElementById（“完成新行程按钮”）.onclick=function（）{
//测试后从显示的地图中检索数据（在用户进行更改后）
$.post（“{url\u for（'store\u trip'）}}}”{
行程数据：{
“trip_name”：“{{trip_name}}”，
“起源”：“{{origin}}”，
“目的地”：“{{destination}}”，
“航路点”：[
“{{航路点}}”
]
} 
});  
}
}*/
//使用地理编码API获取原点、目的地和航路点的坐标。
函数getOriginCoordinates（）{
//passTripData（）；//为“提交”按钮设置onClick事件的函数
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：“{{{origin}}}}”，函数（结果，状态）{
如果（状态=‘正常’）{
originCoordinates=结果[0]。geometry.location；
log（“原点坐标：”+“lat=“+originCoordinates.lat（）+”，lng=“+originCoordinates.lng（））；
getDestCoordinates（原始坐标）；
}否则{
警报（'由于以下原因，原始地理代码未成功：'+状态）；
}
});
}
函数GetDestCoords（原始坐标）{
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：“{{{destination}}}}”，函数（结果，状态）{
如果（状态=‘正常’）{
destCoordinates=结果[0]。几何图形。
from os.path import abspath, dirname, join
from flask import flash, Flask, Markup, redirect, render_template, url_for, request
from flask.ext.sqlalchemy import SQLAlchemy

from flask_wtf import FlaskForm
from wtforms import StringField
from wtforms.validators import DataRequired

import os
import googlemaps
from datetime import datetime
import json

_cwd = dirname(abspath(__file__))

SECRET_KEY = 'flask-session-insecure-secret-key'
SQLALCHEMY_DATABASE_URI = 'sqlite:///' + join(_cwd, 'TripLogger.db')
SQLALCHEMY_ECHO = True
WTF_CSRF_SECRET_KEY = 'this-should-be-more-random' #TODO: RANDOMIZE THIS KEY


app = Flask(__name__)
app.config.from_object(__name__)

db = SQLAlchemy(app)

class Trip(db.Model):
    __tablename__ = 'trips'

    id = db.Column(db.Integer, primary_key=True)
    trip_name = db.Column(db.String, unique=True)
    origin = db.Column(db.String)
    destination = db.Column(db.String)
    waypoints = db.Column(db.String) #SEE IF ANOTHER DATA TYPE IS BETTER- IDEALLY WANT TO STORE LIST OF STRINGS

    def __init__(self, trip_name, origin, destination, waypoints):
        self.trip_name = trip_name
        self.origin = origin
        self.destination = destination
        self.waypoints = waypoints

    def __repr__(self):
        return '<Trip %r(name = %r, origin = %r, destination = %r)>' % (self.id, self.trip_name, self.origin, self.destination)

    def __str__(self):
        return self.trip_name

#CONSIDER CUSTOM VALIDATORS TO ENSURE THAT TRIP_NAME IS UNIQUE FOR A SPECIFIC USER/ACCOUNT
class TripForm(FlaskForm):
    trip_name = StringField('Trip Name', validators=[DataRequired()])
    origin = StringField('Origin', validators=[DataRequired()])
    destination = StringField('Destination', validators=[DataRequired()])
    waypoints = StringField('Waypoint')

@app.route("/", methods = ["GET", "POST"])
def index():
    trip_form = TripForm(request.form)
    if trip_form.validate_on_submit():
        flash("Submitted new trip form, now redirecting to /finalize_new_trip to render map...")
        return redirect(url_for("complete_trip", trip_name = trip_form.trip_name.data, origin = trip_form.origin.data, destination = trip_form.destination.data, waypoints = trip_form.waypoints.data))
    return render_template("index.html", trip_form = trip_form)

# Route to display trip on map (in future, to modify trip details, e.g. waypoints)
@app.route("/finalize_new_trip", methods=["POST"])
def complete_trip():
    return render_template("finish_new_trip.html", trip_name = request.args.get("trip_name"), origin = request.args.get("origin"), destination = request.args.get("destination"), waypoints = request.args.get("waypoints"))

# Store new trip data in database
@app.route("/store_trip", methods=["POST"])
def store_trip():
    trip_data = request.form("trip_data")
    return json.loads(trip_data)[0]

def query_to_list(query, include_field_names=True):
    """Turns a SQLAlchemy query into a list of data values."""
    column_names = []
    for i, obj in enumerate(query.all()):
        if i == 0:
            column_names = [c.name for c in obj.__table__.columns]
            if include_field_names:
                yield column_names
        yield obj_to_list(obj, column_names)


def obj_to_list(sa_obj, field_order):
    """Takes a SQLAlchemy object - returns a list of all its data"""
    return [getattr(sa_obj, field_name, None) for field_name in field_order]

if __name__ == "__main__":
    app.debug = True
    db.create_all()
    app.run()

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<MY_API_KEY>&callback=getOriginCoordinates" type="text/javascript">
    </script>
    <title>Finish New Trip</title>
  </head>
  <body>
    <div id="trip_name"> 
      <h1> {{ trip_name }} </h1>
    </div>
    <div id="map"></div>
    <div id="right-panel">
    <div>
      <form>
        <input type="submit" id="finish-new-trip-button" value="Add My Trip!">
      </form>
    </div>
    <div id="directions-panel"></div>
    </div>

    <script>
      //Wrapper function to AJAX POST request that passes data back to server.
      /*function passTripData() {
        document.getElementById("finish-new-trip-button").onclick = function() {
          // Retrieve data from displayed map (after user makes changes) after testing
          $.post( "{{ url_for('store_trip') }}", {
            trip_data: {
              "trip_name": "{{ trip_name }}",
              "origin": "{{ origin }}",
              "destination": "{{ destination }}",
              "waypoints": [
                "{{ waypoints }}"
              ]
            } 
          });  
        }
      }*/

      //Use Geocoding API to get coordinates for origin, destination, and waypoints.
      function getOriginCoordinates() {
        //passTripData(); // function that sets onClick event for "Submit" button
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': "{{ origin }}"}, function(results, status) {
          if (status == 'OK') {
            originCoordinates = results[0].geometry.location;
            console.log("Origin coords: " + "lat = " + originCoordinates.lat() + ", lng = " + originCoordinates.lng());
            getDestCoordinates(originCoordinates);
          } else {
            alert('Geocode of origin was not successful for the following reason: ' + status);
          }
        });
      }
      function getDestCoordinates(originCoords) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': "{{ destination }}"}, function(results, status) {
          if (status == 'OK') {
            destCoordinates = results[0].geometry.location;
            console.log("Dest coords: " + "lat = " + destCoordinates.lat() + ", lng = " + destCoordinates.lng());
            getWaypointCoordinates(originCoords, destCoordinates);
          } else {
            alert('Geocode of destination was not successful for the following reason: ' + status);
          }
        });
      }
      function getWaypointCoordinates(originCoords, destCoords) {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': "{{ waypoints }}"}, function(results, status) {
          if (status == 'OK') {
            waypointCoordinates = results[0].geometry.location;
            console.log("Waypoint coords: " + "lat = " + waypointCoordinates.lat() + ", lng = " + waypointCoordinates.lng());
            initMap(originCoords, destCoords, waypointCoordinates);
          } else {
            alert('Geocode of waypoints was not successful for the following reason: ' + status);
          }
        });
      }

      function initMap(originCoords, destCoords, waypointCoords) {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;

        //Center map between origin and destination.
        //TEST LATLNG OBJECTS FIRST
        console.log("Origin: lat=" + originCoords.lat() + ", lng=" + originCoords.lng());
        console.log("Destination: lat=" + destCoords.lat() + ", lng=" + destCoords.lng());

        var mapLatitudeCenter = (originCoords.lat() + destCoords.lat())/2;
        var mapLongitudeCenter = (originCoords.lng() + destCoords.lng())/2;

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: {lat: mapLatitudeCenter, lng: mapLongitudeCenter}
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay, originCoords, destCoords, waypointCoords);
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay, originCoords, destCoords, waypointCoords) {
        var waypts = [];
        waypts.push({
          location: waypointCoords,
          stopover: true
        });

        directionsService.route({
          origin: originCoords,
          destination: destCoords,
          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>
  </body>
</html>

@app.route("/finalize_new_trip", methods=["GET"])
def complete_trip():
    return render_template("finish_new_trip.html", trip_name ='new trip', origin='new york, ny', destination='los angeles, california', waypoints='topeka, kansas')