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

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

javascript html flask

Javascript 使用烧瓶从传单地图收集数据,javascript,html,flask,Javascript,Html,Flask,我正在尝试用flask创建一个网页。该网页包括一个传单地图，我可以点击地图创建一个标记，打开一个带有链接的弹出窗口。这个链接应该会打开一个新页面，在那里我可以看到经度和纬度。我目前正在绞尽脑汁研究如何将传单坐标从我的js发送到flask，然后再发送到第二条路线。有人能解释一下我做错了什么吗 Python文件： from flask import Flask, render_template, url_for, request, redirect app = Flask(__name__)

我正在尝试用flask创建一个网页。该网页包括一个传单地图，我可以点击地图创建一个标记，打开一个带有链接的弹出窗口。这个链接应该会打开一个新页面，在那里我可以看到经度和纬度。我目前正在绞尽脑汁研究如何将传单坐标从我的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>


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.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw'{
属性：“地图数据©；贡献者，图像©”，
id:“地图盒。街道”，
accessToken:'your.mapbox.access.token'}）.addTo（mymap）；
mymap.on（'单击'，
职能（e）{
var coord=e.latlng.toString（）.split（'，'）；
var lat=coord[0]。拆分（“（”）；
var lng=coord[1]。拆分（'）；
var检验=5；
var newMarker=L.marker（e.latlng，{draggable:'true'}）.addTo（mymap）
.bindPopup（'创建条目'）.openPopup（）；
$邮政编码（“/”{
经度：液化天然气，
纬度：纬度
});
});

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

您可以在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)

我喜欢这种方法，非常简单。非常感谢。

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