我有一个小瓶子应用程序,我用它来:
除了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 © <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代码:
^{pr2}$Flask应用程序运行良好,因此文件结构不受影响。我只是不能让任何其他变量返回到我的HTML中。我甚至试着制造一些字符串虚拟变量,而不是真正的。没有骰子。在
谢谢
您可以尝试使用内置的
none
值http://jinja.pocoo.org/docs/templates/#none然后做一些类似的事情:
如果您提供一个示例,说明当您传递所有值时发生了什么,这将有所帮助。在
否则,根据me,可能导致问题的原因是python中的“Null”对象是singleton None。检查事物是否“无”的最好方法是使用不是None或更好,例如:
{%if lat%}{lat}}{endif%}
另外,你不能把GeJ赋给div中的var GeJ,而不是突然地在上面放一行JS吗?在
注:我想把这作为一个评论,但没有足够的声誉。道歉。在
<!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 © <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>
;