Question

我有一个小烧瓶应用程序我用它来：

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

我无法获得任何东西，只需 lat 和 lng 即可返回我的HTML {{}}瓶身变量。

这是我的HTML页面：

＆＃13;

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

＆＃13;

这是我的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中。我甚至尝试制作其他真正的变量。没有骰子。

由于

Answer 1

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

然后执行以下操作：

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

Answer 2

如果提供一个示例，说明传递所有值时会发生什么情况，这将有所帮助。

否则，根据 me 的提示，可能是导致python中的'Null'对象为单例None的问题。检查事物是否为“无”的最好方法是使用不是None 或更好，就像这样：

{％if lat％} {{lat}} {％endif％}

此外，您不能将GeJ分配给div中的var GeJ，而不是突然在此处放置一行JS吗？

P.S。我想将此添加为评论，但信誉不够。抱歉。

Answer 3

＆＃13;

<!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 is not Null and lng1 is not Null %}
{{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>

＆＃13;

Flask变量未显示在HTML中

3 个答案: