百度地图获取数据库坐标动态生成标注和折线

最新推荐文章于 2021-07-04 00:57:50 发布

原创最新推荐文章于 2021-07-04 00:57:50 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #数据库

HTML前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用数据库中的坐标数据，在百度地图上动态生成标注和折线。通过注释清晰的步骤，读者可以理解并实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
body, html, #allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IEWfDgFSQV416RrFOGqmje63CHkvQsY1"></script>
<title>地图展示</title>

</head>
<body>
    <div id="allmap"></div>
</body>
<script type="text/javascript">
    //获取用户所有标注信息
    $.getJSON("marker/list.action",function(results){
        var result=results.result;
        if(result==0){
            return 0;
        }
        //获取查询结果
        var list=results.list; 
        // 创建Map实例,并设置地图最大最小级别
        var map = new BMap.Map("allmap",{minZoom:4,maxZoom:9});  
        // 初始化地图,设置中心点坐标和地图级别  
        map.centerAndZoom(new BMap.Point(118.793924, 32.047209), 9);  
        //设置地图类型
        map.addControl(new BMap.MapTypeControl({mapTypes:                    [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP ]}));   
         //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);    
        //动态添加标注
        for(var index=0;index<list.length;index++){ 
            var point = new BMap.Point(list[index].pointX,list[index].pointY);//通过循环遍历获取坐标点生成point
            var marker = new BMap.Marker(point);//创建标注
            map.addOverlay(marker);//添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);//设置标注跳动动画

            //删除标注点
            var removeMarker = function(e,ee,marker){
                map.removeOverlay(marker);//删除标注
                //删除数据库中标注信息
                $().bind($.ajax({
                        type:"post",
                        url:"marker/delete.action",
                        async:true,
                        dataType:"text",
                        data:{"pointX":marker.point.lng,"pointY":marker.point.lat},
                        success:function(){
                            window.location.reload() //标注信息删除刷新一次界面

                        },
                        error:function(){

                        }
                    })
                   );   
            };
            //创建标注菜单
            var markerMenu =new BMap.ContextMenu();
            markerMenu.addItem(new BMap.MenuItem('删除',removeMarker.bind(marker)));
            markerMenu.addItem(new BMap.MenuItem('查看记录',removeMarker.bind(marker)));
            marker.addContextMenu(markerMenu);
            //自动生成这线段连结标注
            if(index!=0){
            //获取上一标注位置
            pointLast=new BMap.Point(list[index-1].pointX,list[index-1].pointY);
            var polyline=new BMap.Polyline([pointLast,point],{strokeColor:"blue",StrokeWeight:6,strokeOpacity:0.5});
            map.addOverlay(polyline);
            }

        }
        //左键单击地图响应事件
        map.addEventListener("click", function(n){

                //1.点击动态生成标注点
                var point=new BMap.Point(n.point.lng,n.point.lat);
                var marker =new BMap.Marker(point);
                map.addOverlay(marker);
                //设置标注跳动动画
                marker.setAnimation(BMAP_ANIMATION_BOUNCE);

                //3.调用后端接口存储该标注信息

                    $("#allmap").click(function(){
                        $.ajax({
                            type:"post",
                            url:"marker/insert.action",
                            async:true,
                            dataType:"text",
                            data:{"pointX":n.point.lng,"pointY":n.point.lat},
                            success:function(){
                            //4.标注信息保存完成刷新一次界面
                                window.location.reload();
                            },
                            error:function(){

                            }
                        })
                    })

                });         
    });

</script>
</html>

注释已经很详细了，就不多解释，如果有哪里不理解的可以给我留言

每一行代码都该有它的思想与灵魂