2017-11-06 18 views
0

私は非常にリーフレットに慣れています。私は、latとlngを、リーフレットのonMapClickイベントからフラスコサーバーアプリケーションに戻す方法を試しています。座標を使用してデータベース上で空間検索を実行できます。このイベントでは、現在のところ、Webアプリのポップアップで緯度が長く表示されます。リーフレットのWebアプリケーションをクリックした後、フラスコサーバーに緯度と経度を返すにはどうすればよいですか?

私は周囲を検索しましたが、私の知識はとても基本的なものなので、私が探している機能がわかりません。

マイウェブマップ

<!DOCTYPE html> 
<html> 
<head> 
    <title>Demo</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <!-- Leaflet CSS file (style sheets)>--> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <!--leaflet java script file>--> 

</head> 
<body> 
    <div id="map1" style="width: 800px; height: 600px;"></div>  
<script> 
    var mymap = L.map('map1').setView([51.5, -0.09], 10); 

    <!--add map to display>--> 
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     maxZoom: 18, 
     id: 'mapbox.streets', 
     accessToken: '*****************' 
    }).addTo(mymap); 

    <!--add popups as a layer>--> 
    var popup = L.popup(); 
    <!--logs the action and gives lat long of where click occured >--> 
    function onMapClick(e) { 
     .setLatLng(e.latlng) 
     .setContent("You clicked the map at " + e.latlng.toString()) 
     .openOn(mymap); 
    } 

    mymap.on('click', onMapClick); 
</script> 
</body> 
</html> 

とサーバアプリ

from flask import Flask, render_template 
app = Flask(__name__) 

@app.route('/demo') 
def webMap(): 
    return render_template('demo.html') 

if __name__ == '__main__': 
    app.run(host='0.0.0.0', port=8090) 

EDIT

私は、AJAX呼び出しを使用して試みたが、405エラー

$.ajax('demo/data/', { 
     type: 'GET', 
     data: { 
     lat: e.latlng.lat, 
     lng: e.latlng.lng 
     } 
    }); 
}; 

フラスコを取得していますアプリ

@app.route('/demo/data/') 
def demoData(): 
    return request.form['lng'], request.form['lat'] 

答えて

0

Aエラーはmethod not allowedエラーです。 hereのように、REST-apiを使用する場合はPOSTリクエスト送信情報を使用する必要があります。

あなたは今、200応答を取得し、postメソッドに

+0

感謝を許可するに

@app.route('/demo/data/' methods=["POST"]) 

にごapp.routeを変更したいとしています – SAB

関連する問題