django批量mysql,Django调用百度地图api在地图上批量增加标记点

最新推荐文章于 2024-01-27 04:15:33 发布

我是观察员

最新推荐文章于 2024-01-27 04:15:33 发布

阅读量739

点赞数

文章标签： django批量mysql

在调用百度地图api进行web开发时遇到了一个需求，我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区。根据需求坐标在地图上添加若干个标记点，并批量的为各个标记点设置监听函数，使之显示我们所需要的信息

开始

创建工程

首先，创建一个测试用的工程来测试我们的需要，可以使用pycharm或者django自带的命令创建工程

1django-admin startproject addressdemo

创建app创建工程之后，cd到工程目录，创建一个名为addresstest的应用1python manage.py startapp addresstest

创建一个名为templates文件，在其中创建一个address.html的测试用页面在address.html中我们需要先为地图创建一个容器在这里我们使用一个确定好的div病设置id为allmap

body, html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

}

#allmap {

height: 700px;

width: 100%;

}

#r-result {

width: 100%;

font-size: 14px;

}

经纬度定位

同时我们也设置了一个button为了更好的测试我们写的引用的函数

注册百度开发者账号获取秘钥访问百度地图开放平台注册账号并获取秘钥

获得秘钥的页面应该如下：

django%E6%89%B9%E9%87%8F%E5%9C%B0%E5%9D%80%E6%A0%87%E8%AE%B0%E6%B3%A8%E5%86%8C%E7%99%BE%E5%BA%A6%E5%BC%80%E5%8F%91%E8%80%85%E8%B4%A6%E5%8F%B7.png

在address.html添加上引入百度api的js代码1

连接mysql数据库在settings.py中修改数据库连接语句1

10DATABASES = {

'default': {

'ENGINE': 'django.db.backends.mysql',

'NAME': 'addressdemo',

'USER': 'root',

'PASSWORD': '000000',

'HOST': 'localhost',

'PORT': '3306',

}

设置模型类在创建的app下的models.py中添加如下语句1

4class address_info(models.Model):

longitude = models.FloatField()

latitude = models.FloatField()

data = models.CharField(max_length=200)

注：

longitude为经度

latitude为维度

data为标记被点击所触发的显示的内容

执行同步数据库操作1

2python manage.py makemigrations

python manage.py migrate

django 1.7之后版本适用

查看数据库并在其中addresstest_address_info表中插入测试数据如图为我插入的几条测试数据

django%E6%89%B9%E9%87%8F%E5%9C%B0%E5%9D%80%E5%9C%B0%E5%9B%BE%E6%A0%87%E8%AE%B0%E6%95%B0%E6%8D%AE%E5%BA%93%E6%8F%92%E5%85%A5%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE.png

在view和urls中配置视图函数和URL

修改views修改完成后的address/views.py为

18from 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写设置一下即可1

8from 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语句块放在页面哪里都可以被执行，所以大家可以按照自己的喜好放置，在这里我选择放在页面的最后

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]));

});

})();

}

由于marker在添加监听事件时调用外部函数添加参数无效但是我们这里又需要传递从数据库读出来的需要显示的信息，所以我们这里使用了js的闭包的概念，还使用了匿名函数，直接写在监听事件函数内

完整的address.html代码如下1

body, html {

width: 100%;

height: 100%;

margin: 0;

font-family: "微软雅黑";

}

#allmap {

height: 700px;

width: 100%;

}

#r-result {

width: 100%;

font-size: 14px;

}

经纬度定位

// 百度地图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]));

});

})();

}

运行测试服务器查看效果1python manage.py runserver

点击按钮获取我的位置

django%E6%89%B9%E9%87%8F%E5%9C%B0%E5%9D%80%E6%A0%87%E8%AE%B0%E6%98%BE%E7%A4%BA%E7%BB%93%E6%9E%9C.png

如上图显示即为成功。

注：

上述代码在django1.9和Python2.7.12在ubuntu16.04 lts中编译成功运行，其他环境请自行测试

上述文字皆为个人看法，如有错误或建议请及时联系我

我是观察员

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
django批量mysql,Django调用百度地图api在地图上批量增加标记点

在调用百度地图api进行web开发时遇到了一个需求，我们需要在网页中内嵌一个div 然后在div中调用百度地图的js显示我们所需要的地区。根据需求坐标在地图上添加若干个标记点，并批量的为各个标记点设置监听函数，使之显示我们所需要的信息开始创建工程首先，创建一个测试用的工程来测试我们的需要，可以使用pycharm或者django自带的命令创建工程1django-admin startproject...
复制链接

扫一扫