关于百度地图的使用（地图数据的增删改查涉及数据库）

最新推荐文章于 2021-01-21 17:00:07 发布

少侠好刀法

最新推荐文章于 2021-01-21 17:00:07 发布

阅读量1.3k

点赞数 1

分类专栏：地图文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_46093894/article/details/107605036

版权

地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景介绍：

公司项目需求需要用到地图，咱们使用的是百度地图；该文章主要是前端内容，导入百度地图、实现地图覆盖物的新增、编辑、删除（右击删除）、数据展示;因为公司平台的特殊性，我是在前端导入地图，处理地图覆盖物的数据，组装成sql数组传入到后端

1.百度地图官网申请密钥

http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

2.百度地图demo

http://lbsyun.baidu.com/jsdemo.htm#webgl0_1

3.获取到密钥之后，去百度地图demo将代码粘出

//地图导入js代码：

<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
    var map = new BMapGL.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setHeading(64.5);
    map.setTilt(73);
</script>

4.实现地图覆盖物的新增

4.1在地图上开启覆盖物绘制工具

  // 百度地图API功能
    var map = new BMap.Map('map');
    var poi = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(poi, 11);
    map.enableScrollWheelZoom();
    
   <!-- var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 -->
    <!-- var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件 -->
    <!-- var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮 -->
    <!-- map.addControl(top_left_control);         -->
        <!-- map.addControl(top_left_navigation);      -->
        <!-- map.addControl(top_right_navigation); -->

    var overlays = [];
    var overlaycomplete = function(e){
        overlays.push(e.overlay);
         // 设置覆盖物可编辑
        e.overlay instanceof BMap.Marker == true ? e.overlay.enableDragging() : e.overlay.enableEditing();
    };

        
    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_BOTTOM_LEFT, //位置
            offset: new BMap.Size(5, 40), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });  
     
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);

4.2获取绘制的覆盖物的数据组装sql数组，传入到后端

//组建sql数组
    var sqlArr =new Array();
    var sql="";
    var coord="";//坐标
    var coType="";//覆盖物类型
    var projectId="1111";//项目id 

 var overlays = [];  
    var overlaycomplete = function(e){  //回掉函数，将画上的覆盖物存储到数组
        overlays.push(e.overlay);
         // 设置覆盖物可编辑
        e.overlay instanceof BMap.Marker == true ? e.overlay.enableDragging() : e.overlay.enableEditing();
    };
function  getPoint(){
            for(var i = 0; i < overlays.length; i++){
                alert(overlays[i]);
                if(overlays[i] instanceof BMap.Marker){//标注物点    
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat;
                    coType="Marker";
                    sql="insert into ou_map (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                    sqlArr.push(sql);
                }

                if (overlays[i] instanceof BMap.Circle) {//标注物圆
                    //alert(overlays[i].getRadius() +"---"+overlays[i].point.lng +"--"+overlays[i].point.lat);
                    coType="Circle";
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat+"#"+overlays[i].getRadius();
                    sql="insert into ou_map (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                    sqlArr.push(sql);
                }
                
        }
            
    }
   /* function clearAll() {
        var linelnglatArr= [];
        for(var i = 0; i < overlays.length; i++){
           // map.removeOverlay(overlays[i]);
         //  alert(overlays[i].lng+"---"+overlays[i].lat);
         for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                var object = new Object();
                object.lnglatX = overlays[i].getPath()[j].lng;
                object.lnglatY = overlays[i].getPath()[j].lat;
                var aa=JSON.stringify(object);
                   linelnglatArr.push(aa);
            }  
        }
        alert(linelnglatArr);    
       // overlays.length = 0   

     
    }    */

     function getLine(){
        for(var i = 0; i < overlays.length; i++){
            var linelnglatArr="";
            if(overlays[i] instanceof BMap.Polyline == true ){
             for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polyline";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);
                  sql="insert into ou_map (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                sqlArr.push(sql);
               }


               if (overlays[i] instanceof BMap.Polygon==true &&  overlays[i] instanceof BMap.Circle ==false) {
                    for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polygon";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);;
                  sql="insert into ou_map (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                sqlArr.push(sql);


               }
                   
        }
       // alert(linelnglatArr.substring(0,linelnglatArr.length-1)); 

    }


    function save() {
        getPoint();//获取标注点、圆的经纬度
        getLine();//获取覆盖物各个顶点的经纬度
        
        //sqlArr=JSON.stringify(sqlArr);
    /*     sqlArr=JSON.parse(sqlArr); */
        console.log(sqlArr);
   // console.log(coord[0]+"---"+coord[1]+"---"+line);
        $.ajax({
            url : "test/jsonAction.action ",  //访问路径
            type : "post", //数据传输方式
            data : {"sqlArr": sqlArr,"actionType":"excute"}, //发送到服务器的数据，属性：值
            async : true,  //是否异步处理；默认是true
            dataType : "json", //预期服务器传回的数据格式
            success : function(data) {  //请求成功调用的函数；data：后台反馈的数据；eval(data)：将后台反馈的数据解析成json数组
               alert("数据插入成功");
            },
            error : function(data) {  //请求失败调用函数
                alert("后台接收数据失败");
            }
        });
    }

5.地图数据展示，从数据库获取地图数据，在地图上画出覆盖物

//页面加载获取地图数据
    $( function() {
    //alert("执行ajax");
        $.ajax({
            url : "test/jsonAction.action",  //访问路径
            type : "post", //数据传输方式
            data : {"sql":sql,"actionType":"query"}, //发送到服务器的数据，属性：值
            async : true,  //是否异步处理；默认是true
            dataType : "json", //预期服务器传回的数据格式
            success : function(data) {  //请求成功调用的函数；data：后台反馈的数据；eval(data)：将后台反馈的数据解析成json数组
               map.clearOverlays();    
               showMap(data);
            },
            error : function(data) {  //请求失败调用函数
                alert("后台接收数据失败");
            }
        });

    });



    //地图展示
    function showMap(data){
        var coord=new Array();
        var Poly=new Array();
        var point=new Array();
        var data=data.listResponseJson;//获取属性
        for(var i=0;i<data.length;i++){
            switch(data[i].COTYPE) {
                 case "Marker":
                    coord=data[i].COORD.split("#");
                    var marker = new BMap.Marker(new BMap.Point(coord[0], coord[1]));        // 创建标注    
                        RightClickDelete(data[i].ID,marker);//右击删除覆盖物
                    marker.id =data[i].ID;  //标记id便于删除和更新
                    map.addOverlay(marker);
                    marker.enableDragging();                    
                    coord=[];//清空数组
                    break;
                 case "Circle":
                    coord=data[i].COORD.split("#");
                    var circle = new BMap.Circle(new BMap.Point(coord[0], coord[1]),coord[2],styleOptions);
                    RightClickDelete(data[i].ID,circle);
                    circle.id =data[i].ID;
                    map.addOverlay(circle);
                    circle.enableEditing();
                    coord=[];//清空数组
                    break;
                case "Polyline":
                    coord=data[i].COORD.split(",");
                    for(var j=0;j<coord.length;j++){
                            Poly=coord[j].split("#");
                            point.push(new BMap.Point(Poly[0],Poly[1]));
                            
                    }
                    var polyline = new BMap.Polyline(point, styleOptions); //创建折线覆盖物
                    polyline.id =data[i].ID;
                    RightClickDelete(data[i].ID,polyline);
                    map.addOverlay(polyline); //增加折线    
                    polyline.enableEditing();
                    coord=[];//清空数组
                    point=[];
                    break;
                case "Polygon":
                    coord=data[i].COORD.split(",");
                    for(var j=0;j<coord.length;j++){
                            Poly=coord[j].split("#");
                            point.push(new BMap.Point(Poly[0],Poly[1]));
                            
                    }
                    var Polygon = new BMap.Polygon(point, styleOptions); //创建折线覆盖物
                    Polygon.id =data[i].ID;
                    RightClickDelete(data[i].ID,Polygon);
                    map.addOverlay(Polygon); //增加折线    
                    Polygon.enableEditing();
                    coord=[];//清空数组
                    point=[];
                    break;
                  default:
                    alert("没有地图数据");
            }
        }

    }

6.地图覆盖物删除

<!-- 鼠标右击删除地图数据 -->    function RightClickDelete(id,marker){        var sqlArr=new Array();        var sql="delete from OU_MAP where id="+id;        sqlArr.push(sql);        var removeMarker = function(e,ee,marker){//右键删除站点                   //ajax向后台传递sql语句，从数据库删除数据                if (confirm("要删除站点吗?")){                    if(true){                        $.ajax({                                    url : "test/jsonAction.action ",  //访问路径                                    type : "post", //数据传输方式                                    data : {"sqlArr": sqlArr,"actionType":"excute"}, //发送到服务器的数据，属性：值                                    async : true,  //是否异步处理；默认是true                                    dataType : "json", //预期服务器传回的数据格式                                    success : function(data) {                                        map.removeOverlay(marker);               //将地图中的标记删除                                         alert("删除成功！");                                    },                                    error : function(data) {  //请求失败调用函数                                        alert("删除失败");                                    }                                                        });                                                                                 };                        }                }                     var markerMenu=new BMap.ContextMenu();                     markerMenu.addItem(new BMap.MenuItem('删除站点',removeMarker.bind(marker)));                     marker.addContextMenu(markerMenu);//给标记添加右键菜单     };

7.编辑页面，编辑覆盖物与新增覆盖物

<!-- 编辑新增覆盖物 -->
    function update(){
            var sqlArr=new Array();
            var newOverlay=new Array();
            var oldOverlay=new Array();
            //获取地图上所有的覆盖物，判断是否有id属性；没有就是新增的覆盖物，有就是编辑的覆盖物
            var allOverlay=map.getOverlays();
            for(var i=0;i<allOverlay.length;i++){
            //alert(allOverlay[i].id);
                    if(allOverlay[i].id != undefined){ //覆盖物编辑
                        oldOverlay.push(allOverlay[i]);    
                        //alert("数据库已有的"+allOverlay[i]);
                    }
            }            
            sqlArr=add(overlays).length >0 ?    edit(oldOverlay).concat(add(overlays)) : edit(oldOverlay);
            
            $.ajax({
                    url : "test/jsonAction.action ",  //访问路径
                    type : "post", //数据传输方式
                    data : {"sqlArr": sqlArr,"actionType":"excute"}, //发送到服务器的数据，属性：值
                    async : true,  //是否异步处理；默认是true
                    dataType : "json", //预期服务器传回的数据格式
                    success : function(data) {
                            alert("编辑成功！");
                        },
                            error : function(data) {  //请求失败调用函数
                            alert("编辑失败");
                        }                    
                    });
    }
    
    
    
    
    function edit(overlays){
        var sqlArr=new Array();
        var sql="";
        for(var i = 0; i < overlays.length; i++){
                if(overlays[i] instanceof BMap.Marker){//标注物点    
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat;
                    coType="Marker";
                    sql="update OU_MAP set coord='"+coord+"' where id="+overlays[i].id;
                    sqlArr.push(sql);
                }

                if (overlays[i] instanceof BMap.Circle) {//标注物圆
                    coType="Circle";
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat+"#"+overlays[i].getRadius();
                    sql="update OU_MAP set coord='"+coord+"' where id="+overlays[i].id;
                    sqlArr.push(sql);
                }
                
        }
        
        
        var linelnglatArr="";
            if(overlays[i] instanceof BMap.Polyline == true ){
             for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polyline";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);
                  sql="update OU_MAP set coord='"+coord+"' where id="+overlays[i].id;
                sqlArr.push(sql);
               }


               if (overlays[i] instanceof BMap.Polygon==true &&  overlays[i] instanceof BMap.Circle ==false) {
                    for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polygon";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);;
                  sql="update OU_MAP set coord='"+coord+"' where id="+overlays[i].id;
                sqlArr.push(sql);


               }
            return sqlArr;
    }
    
    
    function add(overlays){
        var sqlArr=new Array();
        var sql="";
        for(var i = 0; i < overlays.length; i++){
                if(overlays[i] instanceof BMap.Marker){//标注物点    
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat;
                    coType="Marker";
                    sql="insert into OU_MAP (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                    sqlArr.push(sql);
                }

                if (overlays[i] instanceof BMap.Circle) {//标注物圆
                    //alert(overlays[i].getRadius() +"---"+overlays[i].point.lng +"--"+overlays[i].point.lat);
                    coType="Circle";
                    coord=overlays[i].point.lng +"#"+overlays[i].point.lat+"#"+overlays[i].getRadius();
                    sql="insert into OU_MAP (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                    sqlArr.push(sql);
                }
                
        
        
        
        var linelnglatArr="";
            if(overlays[i] instanceof BMap.Polyline == true ){
             for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polyline";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);
                  sql="insert into OU_MAP (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                sqlArr.push(sql);
               }


               if (overlays[i] instanceof BMap.Polygon==true &&  overlays[i] instanceof BMap.Circle ==false) {
                    for(var j = 0; j < overlays[i].getPath().length; j++){//循环每一个连线上的点个数
                    var object = new Object();
                    object.lnglatX = overlays[i].getPath()[j].lng;
                    object.lnglatY = overlays[i].getPath()[j].lat;
                    linelnglatArr=linelnglatArr+object.lnglatX.toString()+"#"+ object.lnglatY.toString() +",";

                }  
                    coType="Polygon";
                coord=linelnglatArr.substring(0,linelnglatArr.length-1);;
                  sql="insert into OU_MAP (projectId,coType,coord) values ('"+projectId+"','"+coType+"','"+ coord+"')";
                sqlArr.push(sql);


               }
        }
            return sqlArr;
    }

地图编辑页面代码（包括覆盖物的增删改查）参考链接：

https://mp.csdn.net/console/editor/html/107605505

少侠好刀法

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
关于百度地图的使用（地图数据的增删改查涉及数据库）

背景介绍：公司项目需求需要用到地图，咱们使用的是百度地图；该文章主要是前端内容，导入百度地图、实现地图覆盖物的新增、编辑、删除（右击删除）、数据展示;因为公司平台的特殊性，我是在前端导入地图，处理地图覆盖物的数据，组装成sql数组传入到后端1.百度地图官网申请密钥http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey2.百度地图demohttp://lbsyun.baidu.com/jsdemo.htm#webgl
复制链接

扫一扫