生成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=" 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)