我有一个小的烧瓶应用程序,正在使用它来:


使用传单地图制作HTML页面
从HTML页面获取用户输入...
使用某些python模块在该输入上运行计算
将这些变量返回页面中的JS函数以填充地图


除了lat和lng返回HTML {{}} flask变量之外,我什么也找不到。

这是我的HTML页面:



<!DOCTYPE html>
<html lang="en">
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
     integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
     crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
  crossorigin="">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Page Title</title>
    <meta charset="utf-8"/>
<style>
#mapid { height: 300px; }
</style>


<body>

<form method="POST">
Latitude to PY: <input name="lat" id="lat"/>
<br/>
Longitude to PY: <input name="lng" id="lng"/>
 <br/>
 <button>Get data</button>
 </form>

{% if lat1 != None and lng1 != None %}
{{lat1}},{{lng1}}
<script>
var lat1 = {{lat1}}
var lng1 = {{lng1}}
</script>
{% endif %}

{% if point != None %}
<p>{{point}}</p>
{% endif %}

{% if GeJ != None %}
{{GeJ}}
<script>
var GeJ = {{GeJ}}
</script>
{% endif %}

<div id="mapid"></div>
     <script>
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
     maxZoom: 18,
     id: 'mapbox.high-contrast',
     accessToken: 'pk.eyJ1IjoiY2dyb3RoIiwiYSI6ImNqZ2w4bWY5dTFueG0zM2w0dTNkazI1aWEifQ.55SWFVBYzs08EqJHAa3AsQ'
    }).addTo(mymap);

    function zoomTo() {
    mymap.panTo(new L.LatLng(lat1, lng1));
                      }

    function addGJ(){
      var myLayer = L.geoJson(GeJ).addTo(mymap);
                    }
    window.onload = zoomTo();
    window.onload = addGJ();
     </script>
</body>
</html>





这是我的Flask Python代码:

from flask import Flask, render_template, request, flash, redirect, url_for,jsonify
from forms import RegistrationForm
import json
import osmnx as ox
import networkx as nx
import matplotlib.pyplot as plt
from networkx.readwrite import json_graph
import pandas as pd
import mplleaflet
app = Flask(__name__)

app.config.update(dict(
    SECRET_KEY="powerful secretkey",
    WTF_CSRF_SECRET_KEY="a csrf secret key"
))
@app.route('/')
def my_form():
    return render_template('map.html')

@app.route('/', methods=['GET', 'POST'])
def my_form_post():
    lat = (request.form['lat'])
    lng = (request.form['lng'])
    lat = lat
    lng = lng
    point = (lat,lng)
    G = ox.core.graph_from_point(point, distance = 500, network_type='walk')
    fig, ax = ox.plot_graph(G)
    GJ = mplleaflet.fig_to_geojson(fig=ax.figure)
    #return lat, ",", lng
    return render_template('map.html', lat1=lat, lng1=lng, GeJ=GJ, point="test_string")`



if __name__ == "__main__":
    app.run(host='0.0.0.0',port=5000,debug=True)


Flask应用程序运行正常,因此文件结构不是问题。我只是无法获取任何其他变量来返回我的HTML。我什至尝试制作一些小的字符串虚拟变量,而不是真正的。没有骰子。

谢谢

最佳答案

您可以尝试使用内置的nonehttp://jinja.pocoo.org/docs/templates/#none

然后执行以下操作:

{% if lat1 is not none and lng1 is not none %}

09-20 22:38