百度地图开发：自定义区划管理php后台数据管理的解决方案（layUI前端）-阿里云开发者社区

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

2023-07-21 130

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

数据管理 DMS，安全协同 3个实例 3个月

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

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

视频演示：

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

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

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