自定义区划管理，不需再受限于行政规划，可根据业务特点（如网点覆盖范围、消费者分布、内部人员分工等）自由划分区域块，实现企业信息的精细化格网管理。
视频演示：
百度地图自定义区划管理视频教程
- 基于百度地图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(); } } }
Done！
