百度地图开发:自定义区划管理php后台数据管理的解决方案(layUI前端)

简介: 百度地图开发:自定义区划管理php后台数据管理的解决方案(layUI前端)

自定义区划管理,不需再受限于行政规划,可根据业务特点(如网点覆盖范围、消费者分布、内部人员分工等)自由划分区域块,实现企业信息的精细化格网管理。

视频演示:

1689931637874.png


百度地图自定义区划管理视频教程

  1. 基于百度地图API开放接口;
  2. 获取边界数据后,PHP后台数据管理;
  3. 降低专业GIS软件门槛,将GIS优化为大众画图工具,让画区不再繁琐;
  4. 支持多人在线协同编辑区域及业务数据,提升工作效率;


JS文件引入

    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/api?v=2.0&ak=11Z8uiP8kIz6AG0Vjiwzbc5f9Ii0cdHd"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript"
            src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
    <!--核心函数库-->
    <script src="js/functions.js"></script>
    <!--layui2.57框架-->
    <script src="js/layui/layui.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/common.css" media="all">


HTML容器构建

<div id="allmap">
    <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<div class="pannel">
    <div class="itemChild">
        <div id="result">
            <p><input type="text" placeholder="区划名称" id="name" lay-verify="required" class="layui-input"></p>
            <p><textarea rows="10" cols="80" id="res" class="layui-textarea"  placeholder="自动获取经纬" readonly></textarea></p>
            <p>
                <!--<input class="layui-btn" type="button" value="获取绘制的覆盖物个数" οnclick="alert(overlays.length)"/>-->
                <input class="layui-btn" type="button" value="清除所有覆盖物" onclick="clearAll()"/>
                <button id="btn" class="layui-btn">提交区划经纬度数据</button>
            </p>
        </div>
    </div>
    <div class="itemChild">
        <table class="layui-hide" id="test"></table>
    </div>
</div>


提交自定义区划

    /*提交自定义区划*/
    $(function () {
        $("#btn").click(function () {
            var name = $("#name").val();
            var lnglat = $("#res").val();
            if (name == "") {
                alert("区划名称不能为空!");
                $("#name").focus();
                return false;
            }
            if (lnglat == "") {
                alert("经纬度不能为空!");
                $("#res").focus();
                return false;
            }
            //提交数据入库;
            addDistrict(name, lnglat.substr(0, lnglat.length - 1))
        })
    })

获取行政区划的边界轮廓

/*获取行政区划的边界轮廓*/
function getArea() {
    $.ajax({
        type: 'post',
        async: true,
        data: {},
        url: 'api/api.php?act=getDistrict&token=3cab7ce4142608c0f40c785b5ab5ca24',
        dataType: "json",
        success: function (res) {
            //console.log(res.data);
            var arr = [];
            for (var m = 0; m < res.data.length; m++) {
                arr.push(res.data[m].lnglat);
            }
            //绘制多边形;
            drawPolygon(arr);
        },
        error: function (err) {
            console.log(err + "请求数据失败!");
        }
    });
    //绘制多边形;
    function drawPolygon(arr) {
        var ops = {
            strokeColor: "rgba(0,0,0,1)",
            fillColor: "rgba(0,0,0,1)",
            fillOpacity: 0.4,
            strokeOpacity: 0.1
        };
        for (var j = 0; j < arr.length; j++) {
            //console.log(eval(arr[j]));
            var plPoint = [];
            for (var i = 0; i < eval(arr[j]).length; i++) {
                //console.log(eval(arr[j])[i][0]);
                plPoint.push(new BMap.Point(eval(arr[j])[i][0], eval(arr[j])[i][1]));
            }
            var ply = new BMap.Polygon(plPoint, ops);
            map.addOverlay(ply);
            //ply.enableEditing();
        }
    }
}


Done!

相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
相关文章
|
10月前
|
安全 PHP
PHP 8 新特性实战:提升开发效率的利器
PHP 8 新特性实战:提升开发效率的利器
274 87
|
10月前
|
安全 PHP
PHP 8 新特性实战:提升开发效率的利器
PHP 8 新特性实战:提升开发效率的利器
320 88
|
9月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1628 0
|
10月前
|
安全 编译器 PHP
PHP 8 新特性:现代开发的强力引擎
PHP 8 新特性:现代开发的强力引擎
284 89
|
10月前
|
安全 编译器 PHP
PHP 8 新特性:现代化开发的飞跃
PHP 8 新特性:现代化开发的飞跃
401 89
|
10月前
|
安全 大数据 PHP
PHP 7+ 新特性实战指南:提升开发效率
PHP 7+ 新特性实战指南:提升开发效率
270 87
|
8月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
12月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
661 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
8月前
|
关系型数据库 MySQL PHP
PHP和Mysql前后端交互效果实现
本文介绍了使用PHP连接MySQL数据库的基本函数及其实现案例。内容涵盖数据库连接、选择数据库、执行查询、获取结果等常用操作,并通过用户登录和修改密码的功能实例,展示了PHP与MySQL的交互过程及代码实现。
466 0
PHP和Mysql前后端交互效果实现
|
关系型数据库 MySQL Linux
查看Linux、Apache、MySQL、PHP版本的技巧
以上就是查看Linux、Apache、MySQL、PHP版本信息的方法。希望这些信息能帮助你更好地理解和使用你的LAMP技术栈。
587 17

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1133
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    499
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    387
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    374
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    494
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    667
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1132
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    262
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    956
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    448