实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密匙"></script>
<!--根据地址判断是否是添加批量地图-->
{% if 'admin/django_admin/company' in request.path %}
<div id="container"
style="
margin-bottom: 40px;
width: 500px;
height: 400px;
top: 50px;
border: 1px solid gray;
overflow:hidden;"> <div id="allmap"></div>
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
</div>
城市<input id="address" type="text" style="width:100px; margin-right:10px;" onclick="myFun()"/>
</div>
{% endif %}
<script type="text/javascript">
lng1 = document.getElementById('id_lng').value;
lat1 = document.getElementById('id_lat').value;
if(lat1 && lng1){
var map = new BMap.Map("allmap"); //实例化一个地图对象
var point = new BMap.Point(lng1,lat1); //设置地图中心的位置
}
else{
var map = new BMap.Map("allmap"); //实例化一个地图对象
var point = new BMap.Point(121.540999,31.300627); //设置地图中心的位置
} var marker = new BMap.Marker(point);
map.addOverlay(marker); map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用 /*第一次先显示已填写经纬度*/
var gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
var addComp = rs.addressComponents;
address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;/*显示地址*/
var label = new BMap.Label(address, {offset: new BMap.Size(20, -10)});/*设置图标*/
marker.setLabel(label);
}); //显示点击的位置
//点击获取坐标
map.addEventListener("click",function(e) {
var allOverlay = map.getOverlays();/*得到地图上的所有标注*/
for (var i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]);/*清除地图上的所有标注*/
}
//存储经纬度
lng = e.point.lng;
lat = e.point.lat;
//在地图上面描点
var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建标注
map.addOverlay(marker);
marker.enableDragging(); //可拖拽
var gc = new BMap.Geocoder();
//获取地址的数据地址
var pt = e.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
document.getElementById('id_address').value = address;
document.getElementById('id_lng').value = lng;
document.getElementById('id_lat').value = lat;
//画图
var label = new BMap.Label(address, {offset: new BMap.Size(20, -10)});
marker.setLabel(label);
});
});
//描点分为创建标注和画图两部分
</script>

django-admin引用百度地图的更多相关文章

  1. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  2. JSP界面引用百度地图获取坐标

    需求: 需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度 解决步骤: 1.引入百度地图api: head中进行引用<script type="text ...

  3. vue 项目中引用百度地图

    新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...

  4. JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...

  5. c# 引用百度地图

    <script type="text/javascript"> //创建和初始化地图函数 var map = new BMap.Map("home" ...

  6. iOS开发之引用百度地图SDK(一)-----------SDK开发指南

    (void)viewWillAppear:(BOOL)animated { [_mapView viewWillAppear]; _mapView.delegate = self; // 此处记得不用 ...

  7. vue脚手架搭建项目引用百度地图--出坑

    这是官网地址 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 需要声明注意的是 BaiduMap 组件容器本身是一个空的块 ...

  8. 解决页面引用百度地图API设置点的logo不显示问题

    在写css时需要引用一个百度的api地图,却发现设置点的logo图片不能显示,后查阅百度测试发现是图片路径的问题: 在引用的下载的html页面找到 var icon = new BMap.Icon 将 ...

  9. vue 中引用 百度地图

    1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...

随机推荐

  1. hMailServer 附件大小限制

    修改php.ini文件 1.post_max_size = 10M 表单提交最大数据为10M.此项不是限制上传单个文件的大小,而是针对整个表单的提交数据进行限制的. 2.file_uploads = ...

  2. spring reactor记录操作日志

    1.注册日志的类: @Configuration@EnableReactorpublic class ReactorConfig { /** * * 〈注册审计日志 Reactor〉 */ @Bean ...

  3. Could not calculate build plan

    问题:根据你提供的镜像地址,下载相应的jar包失败 原因: 1.你提供的镜像地址不稳定,把settings.xml文件中的mirror改成稳定的镜像地址 2.网络不稳定,重新下载,或者切换网络.

  4. cobbler 更换dns和dhcp服务器为dnsmasq

    1) 需要配置/etc/cobbler/module.conf, 把manage_dns和manage_dhcp改为manage_dnsmasq 2) 重启cobbler和dnsmasq服务,dnsm ...

  5. 用Flex实现常见的几种布局

    用Flex实现常见的几种布局 1.水平,垂直居中. <style type="text/css"> .container{ display: flex; width: ...

  6. Mustache(2)

    Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hogan . ...

  7. WPF 属性系统 依赖属性之内存占用分析

    关于WPF的属性系统园子内有不少这方面的文章.里面大都提到了WPF依赖属性的在内存方面的优化.但是里面大都一笔带过.那么WPF到底是怎么样节约内存的.我们通过WPF属性和普通的CLR属性对比来看一下W ...

  8. 文件存储 FileUtil FileBaseDto

    package com.guige.base.fileutils; import com.alibaba.fastjson.JSONArray; import com.aliyun.oss.Servi ...

  9. dos下查找进程,如果找到echo find并结束该进程

    @echo offset var=chromedriver.exetasklist | findstr "%var%" && echo findtaskkill / ...

  10. Android开发:《Gradle Recipes for Android》阅读笔记(翻译)3.5——在flavors间合并java代码

    问题: 你想要在单独的product flavors里面增加Acitivity或者其它java类. 解决方案: 创建合适的代码目录,增加java类,将它们和main代码合并. 讨论: flavors和 ...