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

时间:2023-03-09 01:37:04
leaflet  利用ajax 将前端地图上的数据post到后台

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

前端HTML代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/thirdpart/leaflet/leaflet.css" />
<link rel="stylesheet" href="/static/thirdpart/leaflet/normalize.min.css" />
<link rel="stylesheet" href="/static/thirdpart/leaflet/leaflet-filelayer-style.css" /> <script src="/static/thirdpart/leaflet/leaflet.js" ></script>
<script src="/static/thirdpart/leaflet/KML.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
</head> <body>
<header>
<h1>RTV File Selection System</h1>
</header>
<main>
<div id="map" style="width: 100%; height: 900px; display: block;"></div>
</main> <script>
var map = L.map('map').setView([42.5011596177, -83.5361632705], 13); //Google Satellite map
L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google',
minZoom:2,
}).addTo(map); map.on('click', onMapClick);
    function onMapClick(e) {
        var latlng_point = [e.latlng.lat, e.latlng.lng];
alert(latlng_point); jQuery(function($){
$.ajax({
type:"POST",
data: {point:''+latlng_point},
url: "/videomap/",
cache: false,
dataType: "json",
});
})
} </script> </body>
</html>

后台代码:

 from django.shortcuts import render

 def index(request):

     if request.method == 'POST':
if request.POST.get('point', '') != '':
point = request.POST.get('point', '')
print "################",point return render(request, 'test.html', data)