Googleにロードする現在のビューポートフラスコのクエリのマーカーにマーカをマップする

Question

何千ものマーカーが含まれているGoogleマップのWebアプリケーションを構築しています。マーカーの数が多い場合は、現在のビューポートにマーカーをロードして、アプリの速度を落とさないようにすることが重要です。境界が変わるたびにAJAX呼び出しを行い、ビューポートにマーカーをロードしたいと思います。ビューポートが何であるかを知るためには、北東と南西の緯度と経度座標をURLパラメータとしてバックエンドに渡す必要があります。次に、座標内にあるマーカーをSQLに照会してマップに配置する必要があります。

問題は、「送信」ボタンをクリックしなくても、フロントエンドからバックエンドに座標を送信する方法がわかりません。

これは私がこれまで持っているものです：

フロントエンド：

 <div id="info" action="{{ url_for('data') }}"> 
     <p>NorthEast=</p> 
     <p id="NElat" name ="NElat"></p> 
     <p id="NElng" name = "NElng"></p> 
     </br> 
     <p>SouthWest=</p> 
     <p id="SWlat" name ="SWlat"></p> 
     <p id="SWlng" name ="SWlng"></p> 
     </div> 

     var bounds = map.getBounds(); 
    var NE = bounds.getNorthEast(); 
    var SW = bounds.getSouthWest(); 

    var neLat = NE.lat() 
    var neLng = NE.lng() 
    var swLat = SW.lat() 
    var swLng = SW.lng() 

    document.getElementById("NElat").innerHTML=neLat; 
    document.getElementById("NElng").innerHTML=neLng; 
    document.getElementById("SWlat").innerHTML=swLat; 
    document.getElementById("SWlng").innerHTML=swLng; 

    downloadUrl('/data?neLat=' + neLat + "&neLng=" + neLng + "&swLat=" + swLat + "&swLng=" + swLng, function(results) {...} 

バックエンド：

@app.route("/data") 
def data(): 
    conn = e.connect() 
    latt = request.args.get("neLat", "neLat") 
    query = conn.execute("SELECT * FROM coordinates WHERE lat > ?", [latt]) 
    result = {'data': [dict(zip(tuple (query.keys()) ,i)) for i in query.cursor]} 
    jsonData = json.dumps(result) 
    return jsonData 

Answer 1

は、私はちょうどのために、すべてのリクエスト引数を照会しなければならなかったが判明それは動作する バックエンド：

@app.route("/data", methods=["GET"]) 
def data(): 
    conn = e.connect() 
    nelat = request.args["neLat"] 
    nelng = request.args["neLng"] 
    swlat = request.args["swLat"] 
    swlng = request.args["swLng"] 
    query = conn.execute("SELECT * FROM coordinates WHERE lat < ? AND lat > ? AND lng < ? AND lng > ?", [nelat, nelng, swlat, swlng]) 
    result = {'data': [dict(zip(tuple (query.keys()) ,i)) for i in query.cursor]} 
    jsonData = json.dumps(result) 
    return jsonData