百度地图获取数据库经纬度进行地图标点（django）

最新推荐文章于 2023-06-14 15:10:22 发布

WonderTJ

最新推荐文章于 2023-06-14 15:10:22 发布

阅读量1.1k

点赞数

文章标签： django python 后端 ajax postgresql

本文链接：https://blog.csdn.net/WonderTJ/article/details/127850294

版权

本文介绍如何在Django视图中加载数据库数据，并通过Ajax将数据传递到HTML页面，实现在BMapGL地图上标记点的功能。详细步骤包括在views.py中定义loadpoint方法获取数据，url.py中配置路由，以及HTML中使用jQuery和Ajax进行数据交互和地图标记。

摘要由CSDN通过智能技术生成

一、views.py中写个loadpoint的方法

def loadpoint(request):
    response={}
    try:
        loadpoint=models.Potsc.objects.all()  \\这里的Potsc是我自己的数据库，改成自己的即可
        response['list']=json.loads(serializers.serialize("json",loadpoint))
        response['msg']='success'
        response['error_num'] = 0
    except Exception as e :
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

二、在url.py里设置路由

path('login/point/',views.loadpoint),

'//'路由以实际情况来

三、在html里

<script src="http://code.jquery.com/jquery-latest.js"></script> //要引入jQuery

<script type="text/javascript">

    var map = new BMapGL.Map("container");
    // 创建地图实例
    var point = new BMapGL.Point(118.092546, 24.661058);
    // 创建点坐标
    map.centerAndZoom(point, 10);
    // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    // 开启鼠标滚轮缩放
    var arrData = {

    }
    var pot = []
    function fu(data) {        \\这个fu函数用来给pot赋值以便后面markpoint函数使用
        for (var i = 0; i < data.list.length; i++) {
            var potData = {
                lng: data.list[i].fields.pot_lng, \\此处的pot_lng为数据库字段，下同
                lat: data.list[i].fields.pot_lat  \\data.list[i].fields.xxx是获取ajax返回的值的关键语句
            }
            pot.push(potData)

        }
    }
    $.ajax({
        url:"point/",
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);\\在控制台可以看到数据库的数据有没有传过来

            arrData = data;
            fu(data);         \\因为ajax在最后执行，所以如果不把函数都放进来执行会报未定义错误
            markpoint(data);  \\因为ajax在最后执行，所以如果不把函数都放进来执行会报未定义错误
        }

    })



    console.log(pot)           \\在控制台可以看到有没有给pot赋值成功

    function markpoint(){
        for(var i = 0,pointsLen = pot.length;i <pointsLen;i++){
				var point = new BMapGL.Point(pot[i].lng,pot[i].lat);
				var  marker = new BMapGL.Marker(point);
				map.addOverlay(marker);
				//给标注点添加点击事件。使用立即执行函数和闭包
				/*action() {
					var thePoint = pot[i];
					marker.addEventListener("click",function(){
						showInfo(this,thePoint);
					});
				})();*/

			}
    }


</script>

其中特别需要注意的是需要用到ajax返回值的函数都应该在ajax中执行，不然会报未定义的错误

控制台打开网页后按f12就可以看到