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

Question

I'm trying to create a webpage with flask. 我正在尝试使用烧瓶创建网页。 The webpage includes a leaflet map where I can click on the map to create a marker which opens a popup window with a link. 该网页包含一个传单地图，我可以在该地图上单击以创建一个标记，该标记会打开一个带有链接的弹出窗口。 The link is supposed to open a new page where I can see the longitude and latitude. 该链接应该打开一个新页面，在其中我可以看到经度和纬度。 I'm currently struggeling on how to send the leaflet coordinates from my js to flask and then to the second route. 我目前正在努力如何将传单坐标从我的js发送到flask，然后发送到第二条路线。 Can someone explain to me what I'm doing wrong? 有人可以向我解释我在做什么错吗？

Python file: 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 file: 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 file 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

You could change your popup code to this: 您可以将弹出代码更改为此：

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

This will create an URL containing the coordinates as GET parameters, for example: 这将创建一个包含坐标作为URL的URL，例如：

form?latitude=47.98&longitude=-108.28

You can retrieve these parameters in your Flask app and then render them in your form: 您可以在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)

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-04 20:06:45

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-04 20:06:45

解决方案1
2 已采纳 2018-09-04 20:06:45