百度地图开发:自定义区划管理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操作。
相关文章
|
7月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
1292 0
|
设计模式 数据库连接 PHP
PHP中的设计模式:提升代码的可维护性与扩展性在软件开发过程中,设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案,可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式,以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手,逐步深入到更复杂的应用场景。通过实际案例分析,读者可以更好地理解如何在PHP开发中应用这些设计模式,从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景,重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例,展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项,帮助开发者在不同情境下做出最佳决策。
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
622 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
缓存 NoSQL PHP
Redis作为PHP缓存解决方案的优势、实现方式及注意事项。Redis凭借其高性能、丰富的数据结构、数据持久化和分布式支持等特点,在提升应用响应速度和处理能力方面表现突出
本文深入探讨了Redis作为PHP缓存解决方案的优势、实现方式及注意事项。Redis凭借其高性能、丰富的数据结构、数据持久化和分布式支持等特点,在提升应用响应速度和处理能力方面表现突出。文章还介绍了Redis在页面缓存、数据缓存和会话缓存等应用场景中的使用,并强调了缓存数据一致性、过期时间设置、容量控制和安全问题的重要性。
295 5
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
330 1
|
PHP 数据库 开发者
PHP中的异常处理和自定义异常
【10月更文挑战第3天】在PHP编程中,异常处理是一个重要的话题。它允许开发者优雅地处理错误,提高代码的可读性和可维护性。本文将介绍如何在PHP中进行异常处理,包括基本的try-catch结构,以及如何创建和使用自定义异常类来处理特定的错误情况。通过实际示例,我们将看到如何使用异常处理机制来增强应用程序的健壮性和灵活性。
165 1
|
PHP 数据安全/隐私保护 UED
PHP中实现自定义错误处理与异常管理
【9月更文挑战第2天】在PHP开发过程中,错误处理和异常管理是保证应用健壮性的关键。本文将引导你了解如何在PHP中创建自定义错误处理器,并通过实际代码示例展示如何有效捕获和处理异常,确保你的应用程序能够优雅地处理运行时出现的问题。
|
搜索推荐 PHP UED
PHP中的异常处理与自定义错误页面
【8月更文挑战第33天】在PHP开发中,优雅地处理异常和错误是提升应用稳定性和用户体验的关键。本文将引导你理解PHP的异常处理机制,并教你如何创建自定义错误页面,以增强你的应用对错误的响应能力。从基本的错误类型到深入的异常捕获,再到实现个性化的用户提示,我们将一步步构建一个更加健壮的PHP应用。
165 4
|
NoSQL 数据管理 关系型数据库
利用阿里云的尖端数据库解决方案增强游戏数据管理
利用阿里云的尖端数据库解决方案增强游戏数据管理
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
315 0

热门文章

最新文章