Django调用百度地图api在地图上批量增加标记点
时间:2022-07-25
本文章向大家介绍Django调用百度地图api在地图上批量增加标记点,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在调用百度地图api进行web开发时遇到了一个需求,我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区。根据需求坐标在地图上添加若干个标记点,并批量的为各个标记点设置监听函数,使之显示我们所需要的信息
开始
创建工程
首先,创建一个测试用的工程来测试我们的需要,可以使用pycharm或者django自带的命令创建工程
django-admin startproject addressdemo
创建app
- 创建工程之后,cd到工程目录,创建一个名为addresstest的应用python manage.py startapp addresstest
创建一个名为templates文件,在其中创建一个address.html的测试用页面
- 在address.html中我们需要先为地图创建一个容器 在这里我们使用一个确定好的div病设置id为allmap
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 700px;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
}
</style>
<title>经纬度定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" />
</div>
</body>
</html>
- 同时我们也设置了一个button为了更好的测试我们写的引用的函数
注册百度开发者账号获取秘钥
- 访问百度地图开放平台注册账号并获取秘钥
在address.html添加上引入百度api的js代码
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
连接mysql数据库
- 在settings.py中修改数据库连接语句DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'addressdemo', 'USER': 'root', 'PASSWORD': '000000', 'HOST': 'localhost', 'PORT': '3306', } }
设置模型类
- 在创建的app下的models.py中添加如下语句class address_info(models.Model): longitude = models.FloatField() latitude = models.FloatField() data = models.CharField(max_length=200)
注:
- longitude为经度
- latitude为维度
- data为标记被点击所触发的显示的内容
执行同步数据库操作
python manage.py makemigrations
python manage.py migrate
- django 1.7之后版本适用
查看数据库并在其中addresstest_address_info表中插入测试数据
在view和urls中配置视图函数和URL
修改views
- 修改完成后的address/views.py为
from django.shortcuts import render
import json
from addresstest.models import address_info
def test(request):
address_point = address_info.objects.all()
address_longitude = []
address_latitude = []
address_data = []
for i in range(len(address_point)):
address_longitude.append(address_point[i].longitude)
address_latitude.append(address_point[i].latitude)
address_data.append(address_point[i].data)
return render(request, 'address.html',
{'address_longitude': json.dumps(address_longitude),
'address_latitude': json.dumps(address_latitude), 'address_data': json.dumps(address_data)})
- 由于需要在前段页面中的js代码区域中使用,我们需要将列表json序列化然后通过页面渲染 或者 前段请求后端返回response携带接送数据
- 起初本想直接将address_point这个数据集直接传到前段,在由前段使用模板,没有时间类型也不知道为什么会序列化出错,如果有知道的可以反馈给我 注:
- address_longitude为若干个坐标的经度
- address_latitude为若干个坐标的维度
- address_data为标记上所需要显示的数据
修改urls
- 由于只用来测试,所以我们只需要在工程名下的urls写设置一下即可
from django.conf.urls import url
from django.contrib import admin
from addresstest import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^address/',views.test),
]
在address.html添加设置地图的js
- 因为js语句块放在页面哪里都可以被执行,所以大家可以按照自己的喜好放置,在这里我选择放在页面的最后
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.3088230000, 32.3002390000), 18);
map.enableScrollWheelZoom(true);
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
function get_location() {
var address_latitude ={{ address_latitude |safe}};
var address_longitude ={{ address_longitude|safe }};
var address_data ={{ address_data |safe}};
var point = []; //存放标注点经纬信息的数组
var marker = []; //存放标注点对象的数组
for (var i = 0; i < address_longitude.length; i++) {
point[i] = new BMap.Point(address_longitude[i], address_latitude[i]); //循环生成新的地图点
marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
}
for (i = 0; i < marker.length; i++) {
(function () {
var index = i;
marker[index].addEventListener('click', function () {
this.openInfoWindow(new BMap.InfoWindow(address_data[index]));
});
})();
}
}
</script>
- 由于marker在添加监听事件时调用外部函数添加参数无效但是我们这里又需要传递从数据库读出来的需要显示的信息,所以我们这里使用了js的闭包的概念,还使用了匿名函数,直接写在监听事件函数内
- 完整的address.html代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
#allmap {
height: 700px;
width: 100%;
}
#r-result {
width: 100%;
font-size: 14px;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
<title>经纬度定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
<input type="button" value="获取我的位置" onclick="get_location()"/>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.3088230000, 32.3002390000), 18);
map.enableScrollWheelZoom(true);
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
function get_location() {
var address_latitude ={{ address_latitude |safe}};
var address_longitude ={{ address_longitude|safe }};
var address_data ={{ address_data |safe}};
var point = []; //存放标注点经纬信息的数组
var marker = []; //存放标注点对象的数组
for (var i = 0; i < address_longitude.length; i++) {
point[i] = new BMap.Point(address_longitude[i], address_latitude[i]); //循环生成新的地图点
marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
}
for (i = 0; i < marker.length; i++) {
(function () {
var index = i;
marker[index].addEventListener('click', function () {
this.openInfoWindow(new BMap.InfoWindow(address_data[index]));
});
})();
}
}
</script>
运行测试服务器查看效果
python manage.py runserver
- 在浏览器地址栏输入http://127.0.0.1:8000/address
- 点击按钮获取我的位置
注:
- 上述代码在django1.9和Python2.7.12在ubuntu16.04 lts中编译成功运行,其他环境请自行测试
- 上述文字皆为个人看法,如有错误或建议请及时联系我
- 使用Identity Server 4建立Authorization Server (1)
- Java之异常处理
- 挖洞经验 | 看我如何利用SAML漏洞实现Uber内部聊天系统未授权登录
- 使用ichartjs生成图表
- 使用angular4和asp.net core 2 web api做个练习项目(四)
- list.add(),向List集合插入对象报空指针异常
- 使用angular4和asp.net core 2 web api做个练习项目(三)
- 即学即用系列一:纯函数
- Java之StringBuffer,StringBuilder,Math,Date,SimpleDateFormat,UUID,File
- React编程思想
- 前台分页,以及类别选择
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- 数据库 105道题目整理与吐血总结
- 使用angular4和asp.net core 2 web api做个练习项目(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用 DevTools 新增的 Issues 选项卡发现网页问题
- OpenCV绘制标记函数drawMarker()
- 【crossbeam系列】3 crossbeam-deque:work-stealing算法
- 【Rust日报】2020-08-21 RustConf研讨会在线举办
- 了解不同架构思维,赏析架构之美
- 【Rust日报】2020-08-22 google/autocxx - 高度自动化的rust调用c++,而且安全,时尚
- 【Rust日报】2020-08-24 理解 Rust 的切片
- 猿实战05——手把手教你拥有自己的代码生成器
- Java单元测试——容器内部测试
- Java单元测试——框架(三)——testNG
- Nginx系列:后端服务应用健康检测
- 那些大厂必问的Handler和Binder,有必要去研究么?
- 欢迎来到 TreeMap 的吐槽大会
- OMG,12 个精致的 Java 字符串操作小技巧,学它
- Nginx系列:安全下载模块