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