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

leaflet 利用ajax 将前端地图上的数据post到后台的更多相关文章

  1. 利用ps在光污染地图上寻找最近的观星地区

    城市灯光对于天文观测和天文摄影是有害的,进行这两类活动之前应提前规划地点,下面是笔者尝试的一种利用ps在光污染地图上进行规划的方法. 目前大部分的光污染地图都是基于WA 2015绘制的,可以结合VII ...

  2. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  3. 利用ajax完成项目图册上传删除【实际项目】

    [项目页面效果] [前台jsp页面] jsp的js代码 <script type="text/javascript"> //上传项目图片 function upload ...

  4. 利用Ajax实现前端与.net后端实现数据交互

    使用场景和需求:用户在地址栏输入请求地址,先.net服务器发送页面请求,该页面包含Echart图表,在页面中向.net后端发送数据请求,获取数据后,将数据填充到Echart图表中.其中包含带参与不带参 ...

  5. D3.js学习笔记（二）——使用绑定在DOM上的数据

    简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...

  6. HTTP上传数据 ：表单，二进制数据（multipart/form-data application/octet-stream boundary）

    使用WinINet 一个较简单的例子:上传头像 void CBackstageManager::UpdateAvatarThreadProc(LPVOID params) { stForThread* ...

  7. [前端引用] 利用ajax实现类似php include require 等命令的功能

    利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...

  8. 框架基础：ajax设计方案（三）--- 集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  9. 利用HTML5定位功能，实现在百度地图上定位（转）

    原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...

随机推荐

  1. Java 网络 IO 模型

    在进入主题之前先看个 Java 网络编程的一个简单例子:代码很简单,客户端和服务端进行通信,对于客户端的每次输入,服务端回复 get.注意,服务端可以同时允许多个客户端连接. 服务端端代码: // 创 ...

  2. 9月24日noip模拟赛解题报告

    1.校门外的树(tree.c/cpp/pas 128M,1s) Description LSGJ扩建了,于是校门外有了一条长为L的路.路上种了一排的树,每相邻两棵树之间的距离为1,我们可以把马路看成一 ...

  3. Linux入门之常用命令（12）用户管理

    [用户管理] linux如何查看所有的用户和组信息的方法: 1.cat /etc/passwd: 2.cat /etc/group 1. useradd useradd 命令可以创建一个新的用户帐号, ...

  4. ZOJ1654 Place the Robots

    Zoj1654 标准解法:二分匈牙利. 写法各异嘛,看不懂或者懒得看也正常,如果想了解我思路的可以和我讨论的. 在练习sap,所以还是写了一遍: #include<cstdio> #inc ...

  5. WPF DataGrid自定义样式

    微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. ...

  6. Echarts数据可视化series-heatmap热力图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  8. 【学习】js学习笔记---数组对象

    一.属性 length 数组的大小.数组的length属性总是比数组中定义的最后一个元素的下标大一,设置属性length的值可以改变数组的大小.如果设置的值比它的当前值小,数组将被截断,其尾部的元素将 ...

  9. Django自定义过滤器中is_safe和need_autoescape两个参数的理解

    自定义template过滤器的方法参考文档,不再赘述 is_safe 文档说明过滤的两种最终形态,其中一种是设置register.filter(is_safe=True),但是对is_safe的具体作 ...

  10. Java集合框架，未完

    一.集合类 集合的由来: 面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就需要将对象进行存储,集合就是存储对象最常用的一种方式. 集合特点:1,用于存储对象的容器.(容器本身就是 ...