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

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

注册百度开发者账号获取秘钥

• 访问百度地图开放平台注册账号并获取秘钥
  获得秘钥的页面应该如下：

  
  
  

  注册获取百度地图开发者账号

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

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

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

• 完整的address.html代码如下

运行测试服务器查看效果

  python manage.py runserver

• 在浏览器地址栏输入http://127.0.0.1:8000/address

• 点击按钮获取我的位置

  
  
  

  批量地址标记显示结果
  
  

  如上图显示即为成功。

注：

• 上述代码在django1.9和Python2.7.12在ubuntu16.04 lts中编译成功运行，其他环境请自行测试
• 上述文字皆为个人看法，如有错误或建议请及时联系我