百度地图覆盖物编辑（覆盖物的增删改查）

最新推荐文章于 2024-05-25 13:46:03 发布
最新推荐文章于 2024-05-25 13:46:03 发布
阅读量772 收藏 1
点赞数 1
分类专栏： 地图 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46093894/article/details/107605505
版权

附上地图编辑页面代码（包括覆盖物的增删改查）

<!DOCTYPE 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 {width: 100%; height:100%; overflow: hidden;}
    #result {width:100%;font-size:12px;}
    dl,dt,dd,ul,li{
        margin:0;
        padding:0;
        list-style:none;
    }
    p{font-size:12px;}
    dt{
        font-size:14px;
        font-family:"微软雅黑";
        font-weight:bold;
        border-bottom:1px dotted #000;
        padding:5px 0 5px 5px;
        margin:5px 0;
    }
    dd{
        padding:5px 0 0 5px;
    }
    li{
        line-height:28px;
    }
    </style>
    
    <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FTxuWs3OwyIdo28v38WoVqLUnizILv3h"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    
    <!--加载检索信息窗口-->
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
    <title>地图展示</title>
    <style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    button{
        width: 68px;
        height: 48px;
        margin-top: 10px;
        margin-left: 5px;
        border-radius:10px;
        color: #2378b4;

    }
    </style>
</head>
<body>
    
        
    <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">    
        <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
<div id="result" style="position: absolute; z-index: 1; text-size-adjust: none; bottom: auto; right: auto; top: 5px; ">
        <button  class="but" id="open" onclick="update()  ">保存</button>
        <button  class="but" id="close" onclick="edit()">刷新</button>
    </div>
<!--      <div id="result">
    <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays)"/>
    <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>
</div>  -->
    <script type="text/javascript">

    // 百度地图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 projectId=2;//项目id
    var sql="select ID,COTYPE,COORD from OU_MAP where PROJECTID="+projectId;
    var prr="";//坐标
    var coType="";//覆盖物类型

    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);

    //页面加载获取地图数据
    $( 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("没有地图数据");
            }
        }

    }

        
    <!-- 编辑新增覆盖物 -->
    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;
    }
    
    
    
    
    <!-- 鼠标右击删除地图数据 -->
    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);//给标记添加右键菜单
     };
</script>
</body>
</html>

代码分块查看

关于百度地图的使用（地图数据的增删改查涉及数据库）_少侠好刀法的博客-CSDN博客_百度地图数据库

少侠好刀法
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图无限个多边形覆盖物实例代码
11-18
同时本代码实例补充了百度地图API功能，实现在多边形覆盖物中心点显示覆盖区域名称的功能，同时改变覆盖物形状，名称位置会自动更新于覆盖物的中心。点击名称还可弹出名称编辑对话框，实现更新覆盖区域名称的目的，...
百度地图电子围栏功能的实现
weixin_34348805的博客
04-16 1854
最近公司项目需求，要做一个百度地图电子围栏的功能，在网上查了一下资料，看了很多博客，大多数都写的不是很详细，我看的云里雾里的，最后终于集合所有的几篇资料，自己做出了一个简单的demo，下面将过程记录和分享一下，希望给予有需要同学一些帮助，我这个人说话比较啰嗦，所以写的一定会很详细的，哈哈！闲言少叙，开始了。 本篇内容实现的过程中将会解决如下几个问题： （1）实现百度地图鼠标绘制多...
百度地图调用及电子围栏设置
weixin_30485291的博客
03-20 917
一、百度地图的引用：首先要注册百度开发者账号，获得一个密钥后就可引用下面的js来调取百度地图； 二、百度地图电子围栏的设置 1、设置电子围栏，个人的思路是先取到鼠标绘制的所有点的坐标，然后储存到数据库中， // 百度地图API功能 var map = new BMap.Map('map'); var poi = new BMap.Point(116.30785...
百度地图圆形覆盖物半径设置编辑联动
weixin_34342905的博客
05-10 521
如图需求： 需要实现a与b的联动，且圆形覆盖物的半径可拖拽改变，a也可以设置圆形覆盖物的半径值； 代码如下：(经供参考) <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta nam...
百度地图覆盖物在可编辑状态下,编辑的回调函数
隶属感的博客
04-24 1787
之前想绘制工具绘制完范围后,获取这片范围中的点 == > 显示到列表上, 后续可能想调整这个框选的范围,之前没找到这个多边形的update 回调方法怎么添加 ,现在找到了 var overlaycomplete = function (e) { var box = overlays[overlays.length - 1];//获取创建的最新一个覆盖物...
百度地图添加自定义覆盖物
前端劝退工程师
03-17 1228
添加自定义覆盖物
基于百度地图api清除指定覆盖物(Overlay)的方法
08-28
下面小编就为大家分享一篇基于百度地图api清除指定覆盖物(Overlay)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
百度地图覆盖物
06-22
百度地图 SDK v3.5.0 实现一个具有动画效果的标注覆盖物
百度地图去掉marker覆盖物或者去掉maker的label文字方法
08-28
下面小编就为大家分享一篇百度地图去掉marker覆盖物或者去掉maker的label文字方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
百度地图类库 自定义覆盖物.zip
07-11
此类表示地图上的一个覆盖物，该覆盖物由文字和图标组成，从Overlay继承。 主入口类是TextIconOverlay， 基于Baidu Map API 1.2
地图区域选点（增删改查）
qq_41468247的博客
12-31 707
1.安装 见这里的安装步骤 2.组件封装
百度地图的覆盖物自定义（一）--标注物的自定义
凌凌小博客
09-02 3686
百度地图的覆盖物自定义（一）--标注物的自定义 导师接了一个外包，需要结合百度地图，但除了调用一个百度地图的架构，其他都是要实现自定义，这一段子时间真是被这破地图折腾的死去活来，但经过几天的奋斗，终于实现客户的各种自定义需求。因为网上资料完整版太少了，开始我是一边一边看百度地图的api文档以及demo和各种网上查找，但还是没能实现需求，最终最能去文档中查看一个个涉及到的类中的各种方法，真是心疼自
openlayers绘制经纬网格，有添加或者移除功能
qq_52959651的博客
05-21 219
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
React Suspense与Concurrent Mode：异步渲染的未来
天涯学馆
05-20 1075
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
vue 使用 export default
global_coding的博客
05-24 297
vue 使用 export default
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 907
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
React18+TypeScript搭建通用中后台项目实战04 封装常用工具函数
最新发布
Python私教
05-25 236
此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。此时，访问 http://localhost:5173/ 进行测试。修改 src/api/request.ts。修改 src/page/Index.tsx。修改 src/page/Index.tsx。修改 src/page/Index.tsx。
Vue从入门到实战Day07
ltt159264的博客
05-21 918
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据。大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理；②响应式变化；③操作简洁（vuex提供了一些辅助函数）。
使用elementUI的form表单校验时，错误提示位置异常解决方法
xuelong的博客
05-22 196
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
kotlin百度地图覆盖物
05-12
在 Kotlin 中使用百度地图 SDK 添加覆盖物可以按照以下步骤进行： 1. 导入百度地图 SDK 的库文件，并在布局文件中添加百度地图控件。可以参考官方文档进行配置。 2. 在 Activity 或 Fragment 中获取地图控件，并...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值