Question

我正在尝试创建一个带有烧瓶的网页。该网页包含一个传单地图，我可以在该地图上单击以创建一个标记，该标记会打开一个带有链接的弹出窗口。该链接应该打开一个新页面，在其中我可以看到经度和纬度。我目前正在努力如何将传单坐标从我的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/leaflet@1.3.4/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/leaflet@1.3.4/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 &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>',
        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>

Answer 1

您可以将弹出式代码更改为此：

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();
});

这将创建一个包含坐标作为URL的URL，例如：

form?latitude=47.98&longitude=-108.28

您可以在Flask应用中retrieve these parameters，然后以您的形式呈现它们：

@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)

使用烧瓶从传单地图中收集数据

1 个答案: