2017-04-06 61 views
0

我正在構建一個包含數千個標記的谷歌地圖網絡應用程序。處理大量標記時,僅在當前視口中加載標記以減慢應用速度很重要。我想在每次邊界更改並加載視口中的標記時進行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 
+0

如何使用Javascript在地圖上爲點擊創建事件偵聽器?當它檢測到點擊時,它可以發送一個AJAX請求到您的後端來獲取新的標記。 – coralvanda

+0

感謝您的評論。我特意尋找一種方法來查詢地圖視口中的標記。 – Ibarrameade

回答

0

原來我只是查詢所有請求論點它的工作 後端:

@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