django-admin引用百度地图

实现的功能有,某个地点对应的经纬度自动填上,如果有经纬度的话,自动显示对应经纬度的地点,密匙在去百度地图引用搜索
<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引用百度地图的更多相关文章
- JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise
上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...
- JSP界面引用百度地图获取坐标
需求: 需要在JSP界面上引用百度地图,文本框中输入地址之后,自动拿到在百度地图上的经纬度 解决步骤: 1.引入百度地图api: head中进行引用<script type="text ...
- vue 项目中引用百度地图
新建map.js export const BaiduMap = { init: function() { const BMapURL = 'https://api.map.baidu.com/api ...
- JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...
- c# 引用百度地图
<script type="text/javascript"> //创建和初始化地图函数 var map = new BMap.Map("home" ...
- iOS开发之引用百度地图SDK(一)-----------SDK开发指南
(void)viewWillAppear:(BOOL)animated { [_mapView viewWillAppear]; _mapView.delegate = self; // 此处记得不用 ...
- vue脚手架搭建项目引用百度地图--出坑
这是官网地址 https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 需要声明注意的是 BaiduMap 组件容器本身是一个空的块 ...
- 解决页面引用百度地图API设置点的logo不显示问题
在写css时需要引用一个百度的api地图,却发现设置点的logo图片不能显示,后查阅百度测试发现是图片路径的问题: 在引用的下载的html页面找到 var icon = new BMap.Icon 将 ...
- vue 中引用 百度地图
1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...
随机推荐
- dubbo_实现Hessian的远程调用协议
1.优点 连接个数:多连接 连接方式:短连接 传输协议:HTTP 传输方式:同步传输 序列化:Hessian二进制序列化 适用范围:传入传出参数数据包较大,提供者比消费者个数多,提供者压力较大,可传文 ...
- AudioToolKit的简单介绍及教程
AudioToolKit的简单介绍及教程 (2013-02-21 09:29:18) 转载▼ 标签: 游戏开发 unity3d教程 unity3d unity it 分类: Unity3d之插件篇 原 ...
- JS鼠标的拖拽原理
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...
- PHP安装加载yaf扩展
Yaf,全称 Yet Another Framework,是一个C语言编写的PHP框架,是一个用PHP扩展形式提供的PHP开发框架, 相比于一般的PHP框架, 它更快. 它提供了Bootstrap, ...
- RocketMQ 消息队列单机部署及使用
转载请注明来源:http://blog.csdn.net/loongshawn/article/details/51086876 相关文章: <RocketMQ 消息队列单机部署及使用> ...
- 解决pip安装模块报错Cannot fetch index base URL http://pypi.python.org/simple/
产生这个问题的原因呢和github一样,因为他们用的cdn被墙.经小伙伴反馈,解决办法如下. 通过指定国内镜像源来安装: pip --trusted-host 镜像源 install 模块名 -i 镜 ...
- 嵌入式开发之davinci--- 8148/8168/8127 中的音频alsa 采集
1.snd_pcm_open,打开句柄. 2.配置参数,可能用到的接口:snd_pcm_hw_params_alloca.snd_pcm_hw_params_any.snd_pcm_hw_params ...
- boot2docker里报"no space left on device" error的解决方法
docker中pull远程image时:报 no space left on device virtualbox中调大虚拟内存即可.. 之前调的硬盘大小...
- Unity3D学习笔记——IDE工作视图
Unity3D中五个界面的使用: Project视图:存放游戏资源,比如贴图,音频,JS脚本等 Project中可创建的文件如下: Hierarchy视图:主要存放游戏场景中的对象,如摄像机,精灵,箱 ...
- 防火墙系列之firewall
firewalld 介绍 防火墙守护 firewalld 服务引入了一个信任级别的概念来管理与之相关联的连接与接口.它支持 ipv4 与 ipv6,并支持网桥,采用 firewall-cmd (com ...