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

本文涉及的产品
数据管理 DMS,安全协同 3个实例 3个月
推荐场景:
学生管理系统数据库
简介: 百度地图开发:自定义区划管理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!

相关实践学习
MySQL基础-学生管理系统数据库设计
本场景介绍如何使用DMS工具连接RDS,并使用DMS图形化工具创建数据库表。
相关文章
|
1月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
148 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
223 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 PHP 开发者
Wordpress主题开发之index.php
本文介绍了 WordPress 主题开发中页面结构与模板文件的使用方法。通过 header.php、sidebar.php、footer.php 和 index.php 等模板文件,实现网站模块化设计,便于统一管理和代码重用。Header 部分包含 logo、导航条等;Content 展示主体内容;Side bar 显示推荐信息或广告;Footer 则呈现版权和备案信息等内容。文章还提供了各模板文件的具体代码示例,帮助开发者快速理解和应用 WordPress 模板机制。
|
19天前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
82 11
|
18天前
|
API PHP 数据库
PhalApi 2.x:让PHP接口开发从“简单”到“极简”的开源框架
PhalApi 2.x 是一款专为接口开发设计的轻量级PHP框架,性能卓越且易于上手。它支持多协议、自动生成文档、提供多种客户端SDK,并采用现代化技术栈,适合中小型项目及微服务架构。通过清晰的分层架构和丰富的扩展库,开发者可快速构建高可用API。其日均超1000万次调用,广泛应用于移动App、物联网、电商等领域。官网:https://www.phalapi.net/,欢迎体验高效开发之旅!
|
2月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
118 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
2月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
229 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
140 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
2月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
106 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
3月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
134 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

下一篇
oss创建bucket