美文网首页
Django调用百度地图api在地图上批量增加标记点

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

作者: EarthChen | 来源:发表于2017-08-06 18:07 被阅读1012次

在调用百度地图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为了更好的测试我们写的引用的函数

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

  • 访问<a href="http://lbsyun.baidu.com/index.php?title=jspopular">百度地图开放平台</a>注册账号并获取秘钥
    获得秘钥的页面应该如下：


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

在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中编译成功运行，其他环境请自行测试
  • 上述文字皆为个人看法，如有错误或建议请及时联系我

相关文章

网友评论

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

      本文链接：https://www.haomeiwen.com/subject/ovknlxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|Django调用百度地图api在地图上批量增加标记点|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！