我正在尝试使用 Flask 创建一个网页。该网页包括一个传单 map ，我可以在其中单击 map 来创建一个标记，该标记将打开一个带有链接的弹出窗口。该链接应该打开一个新页面，我可以在其中看到经度和纬度。我目前正在努力解决如何将传单坐标从我的js发送到flask，然后发送到第二条路线。有人可以向我解释我做错了什么吗？
Python 文件:
from flask import Flask, render_template, url_for, request, redirect
app = Flask(__name__)
@app.route('/', methods=["GET","POST"])
def mainpage():
if request.method == "POST":
longitude = request.form["longitude"]
latitude = request.form["latitude"]
return lredirect(url_for("form", longitude=longitude, latitude=latitude))
return render_template("main.html")
@app.route('/form')
def form():
return render_template("form.html")
if __name__ == "__main__":
app.run(debug=True)
main.html 文件:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="412d2420272d243501706f726f75" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<!-- java script -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f8f1f5f2f8f1e0d4a5baa7baa0" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style=" position: fixed;
top: 54px;
left: 0;
bottom: 40px;
right: 0;
overflow: auto;"></div>
<script type=text/javascript>
var mymap = L.map('mapid').locate({setView: true, maxZoom: 16});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
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>',
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'}).addTo(mymap);
mymap.on('click',
function(e){
var coord = e.latlng.toString().split(',');
var lat = coord[0].split('(');
var lng = coord[1].split(')');
var test=5;
var newMarker = L.marker(e.latlng, {draggable:'true'}).addTo(mymap)
.bindPopup('Create an entry <a href="{{ url_for('form') }}"> here</a>').openPopup();
$.post( "/", {
longitude: lng,
latitude: lat
});
});
</script>
</body>
</html>
form.html 文件
<body>
<div class="form">
<form action="/action_page.php">
<label for="longi">Longitude</label>
<input type="text" id="longi" name="longitude" value={{ longitude }}>
<label for="lati">Latitude</label>
<input type="text" id="lati" name="latitude" value={{ latitude }}>
<input type="submit" value="Submit">
</form>
</div>
</body>
最佳答案
您可以将弹出代码更改为:
mymap.on('click',
function(e){
var coord = e.latlng; // no need for toString()
var lat = coord.lat;
var lng = coord.lng;
var newMarker = L.marker(e.latlng, {draggable:'true'}).addTo(mymap)
.bindPopup('Create an entry <a href="{{ url_for('form') }}?latitude='+lat+'&longitude='+lng+'"> here</a>').openPopup();
});
这将创建一个包含坐标作为 GET 参数的 URL，例如:
form?latitude=47.98&longitude=-108.28
您可以retrieve these parameters在您的 Flask 应用程序中，然后将它们呈现在您的表单中:
@app.route('/form')
def form():
longitude = request.args.get('longitude', type=float)
latitude = request.args.get('latitude', type=float)
return render_template("form.html", longitude=longitude, latitude=latitude)
关于javascript - 使用 flask 从传单 map 收集数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52172010/