生成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.          map.on('click', onMapClick);
  32.          function onMapClick(e) {
  33.              var latlng_point = [e.latlng.lat, e.latlng.lng];
  34.              alert(latlng_point);
  35.  
  36.              jQuery(function($){
  37.                   $.ajax({
  38.                      type:"POST",
  39.                      data: {point:''+latlng_point},
  40.                      url: "/videomap/",
  41.                      cache: false,
  42.                      dataType: "json",
  43.                  });
  44.               })
  45.          }
  46.  
  47.      </script>
  48.  
  49.  </body>
  50.  </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)

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. SqlHelper工具类

    public class SqlHlper { public static readonly string constr = ConfigurationManager.ConnectionString ...

  2. Java比较器

    导语 本节内容,比较器Comparable是核心内容. 主要内容 重新认识Arrays类 两种比较器的使用 具体内容 Arrays类 在之前一直使用的"java.util.Arrays.so ...

  3. JAVA编码互转（application/x-www-form-urlencoded）

    本质上来说,java.net.UrlEncoder适用于将 String 转换为 application/x-www-form-urlencoded MIME 格式的静态方法 时 ,使用 但!一般情况 ...

  4. Jquery跨域读取城市天气预报信息

    最新项目中遇到一个问题,页面需要显示一些天气信息,但是部署网站的服务器没连接外网,只有客户端的电脑能连外网,于是想用js去实现这个功能. 刚开始找了一些方法,单独在浏览器中可以使用,但是在项目中运行的 ...

  5. 【网络爬虫入门02】HTTP客户端库Requests的基本原理与基础应用

    [网络爬虫入门02]HTTP客户端库Requests的基本原理与基础应用 广东职业技术学院  欧浩源 1.引言 实现网络爬虫的第一步就是要建立网络连接并向服务器或网页等网络资源发起请求.urllib是 ...

  6. H5新手快速入门 简单布局

    布局*{ margin: 0; padding: 0;}.quan{ width: 100%; height: 2000px; background: black url("../ima/b ...

  7. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  8. 完整Log4Net配置信息

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  9. python 字典详解

    1.字典的定义 字典类似于列表,但相对于列表来说字典更加通用,列表的下标必须必须为整数,而字典下标则可以为任意字符串/数字等,不可以是可变数据类型(列表,数组,元组) 字典包含下标(keys)集合和值 ...

  10. Android基础知识04—Activity活动之间传递数据

    ------活动之间传递数据------ 向下一个活动传递数据: Intent中提供了一系列的putExtra()方法,可以把数据暂存到Intent中,启动另一个活动的时候就可以取出来. 代码: (存 ...