leaflet 利用ajax 将前端地图上的数据post到后台

生成Google地图，在地图上单击后，将该点的经纬度反馈给后台。

前端HTML代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5      <link rel="stylesheet" href="/static/thirdpart/leaflet/leaflet.css" />
 6     <link rel="stylesheet" href="/static/thirdpart/leaflet/normalize.min.css" />
 7     <link rel="stylesheet" href="/static/thirdpart/leaflet/leaflet-filelayer-style.css" />
 8 
 9     <script src="/static/thirdpart/leaflet/leaflet.js" ></script>
10     <script src="/static/thirdpart/leaflet/KML.js"></script>
11     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
12 </head>
13 
14 <body>
15     <header>
16      <h1>RTV File Selection System</h1>
17     </header>
18     <main>
19         <div id="map" style="width: 100%; height: 900px; display: block;"></div>
20     </main>
21 
22     <script>
23         var map = L.map('map').setView([42.5011596177, -83.5361632705], 13);
24         
25         //Google Satellite map
26         L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
27             attribution: 'google',
28             minZoom:2,
29         }).addTo(map);
30         
31 
32         map.on('click', onMapClick);
33         function onMapClick(e) {
34             var latlng_point = [e.latlng.lat, e.latlng.lng];
35             alert(latlng_point);
36             
37             jQuery(function($){
38                  $.ajax({
39                     type:"POST",
40                     data: {point:''+latlng_point},
41                     url: "/videomap/", 
42                     cache: false,
43                     dataType: "json",
44                 });
45              })
46         }
47 
48     </script>
49 
50 </body>
51 </html>

后台代码：

 1 from django.shortcuts import render
 2 
 3 def index(request):
 4    
 5     if request.method == 'POST':
 6         if request.POST.get('point', '') != '':
 7             point = request.POST.get('point', '')
 8             print "################",point
 9         
10     return render(request, 'test.html', data)

 

posted @ 2017-09-20 18:59  声声慢43  阅读(1196)  评论(0)  编辑  收藏  举报