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

earthchen

发布于 2020-09-24 11:16:59

1.5K0

发布于 2020-09-24 11:16:59

文章被收录于专栏：earthchen的专栏

在调用百度地图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>