作业环境提交

js/personnelControl/personnelControl.js

@@ -179,6 +179,7 @@ document.addEventListener('DOMContentLoaded', function() {
         navigator.geolocation.getCurrentPosition(function (position) {
             lat = position.coords.latitude;
             lon = position.coords.longitude;
+            console.log(lon,lat)
             map= new BMap.Map("map");
             map.centerAndZoom(new BMap.Point(lon,lat), 11);
             map.enableScrollWheelZoom(true);
@@ -186,53 +187,49 @@ document.addEventListener('DOMContentLoaded', function() {
 
             var marker = new BMap.Marker(new BMap.Point(lon,lat));        // 创建标注
             map.addOverlay(marker);
+
+        var overlays = [];
+            var overlaycomplete = function (e) {
+                overlays.push(e.overlay);
+            };
+
+            var styleOptions = {
+                strokeColor: "red", //边线颜色。
+                fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
+                strokeWeight: 3, //边线的宽度，以像素为单位。
+                strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
+                fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
+                strokeStyle: 'solid' //边线的样式，solid或dashed。
+            }
+            //实例化鼠标绘制工具
+            var drawingManager = new BMapLib.DrawingManager(map, {
+                isOpen: false, //是否开启绘制模式
+                enableDrawingTool: true, //是否显示工具栏
+                drawingToolOptions: {
+                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
+                    offset: new BMap.Size(5, 5), //偏离值
+                },
+                circleOptions: styleOptions, //圆的样式
+                polylineOptions: styleOptions, //线的样式
+                polygonOptions: styleOptions, //多边形的样式
+                rectangleOptions: styleOptions //矩形的样式
+            });
+            //添加鼠标绘制工具监听事件，用于获取绘制结果
+            drawingManager.addEventListener('overlaycomplete', overlaycomplete);
+            console.log(overlays)
+
+            function clearAll() {
+                for (var i = 0; i < overlays.length; i++) {
+                    map.removeOverlay(overlays[i]);
+                }
+                overlays.length = 0
+            }
         });
     } else {
         console.log("浏览器不支持 Geolocation API");
     }
-    let overlay; // 用于存储绘制的电子围栏
-    // 添加按钮点击事件
-    document.getElementById('customizeBtn').addEventListener('click', function() {
-        document.getElementById('popup').style.display = 'block';
-        let shapeSelect = document.getElementById('shape');
-        let shapeType = shapeSelect.options[shapeSelect.selectedIndex].value;
 
-        if (shapeType === 'circle') {
-            map.addEventListener("click", drawCircle);
-        } else if (shapeType === 'polygon') {
-            map.addEventListener("click", drawPolygon);
-        }
-    });
-    // 绘制圆形电子围栏
-    function drawCircle(e) {
-        if (overlay) {
-            map.removeOverlay(overlay);
-        }
-        let center = e.point;
-        let circle = new BMap.Circle(center, 2000, {
-            fillColor: "blue",
-            fillOpacity: 0.3,
-            strokeColor: "blue",
-            strokeWeight: 2,
-            strokeOpacity: 0.8
-        });
-        map.addOverlay(circle);
-        overlay = circle;
-    }
 
-    // 绘制多边形电子围栏
-    function drawPolygon(e) {
-        if (overlay) {
-            map.removeOverlay(overlay);
-        }
-        let polygon = new BMap.Polygon([
-            new BMap.Point(e.point.lng, e.point.lat),
-            new BMap.Point(e.point.lng + 0.1, e.point.lat + 0.1),
-            new BMap.Point(e.point.lng + 0.1, e.point.lat - 0.1)
-        ], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.8, fillColor: "red", fillOpacity: 0.3});
-        map.addOverlay(polygon);
-        overlay = polygon;
-    }
 });
 
 

pages/personnelControl/personnelControl.html

@@ -13,7 +13,10 @@
     <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
     <script src="../../api/commonRequest.js" type="text/javascript"></script>
     <script src="../../js/publics/aescbc.js"></script>
-    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak==s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>
+<!--    <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak==s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B"></script>-->
+    <script src="http://api.map.baidu.com/api?v=3.0&ak=s0zhKgClIXRG8hQp3HB4KtiXPWw1dP8B" type="text/javascript"></script>
+    <script src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"  type="text/javascript"></script>
+    <link href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"  rel="stylesheet" />
     <script src="../../js/personnelControl/personnelControl.js"></script>
     <title>人员管控</title>
 </head>
@@ -21,7 +24,7 @@
 <div class="large-frame layout">
     <div class="left layout-vertical">
         <div class="left-down">
-            <div class="background-img" style="background-image: url('../../img/consQuality/QualityInspection.png');">
+            <div class="background-img" style="background-image: url('../../img/personnelControl/ListPeople.png');">
                 <div class="layout-vertical right-down">
                     <div class="left-down-left" style="padding: 2% 3% 0 3%;box-sizing: border-box;">
                         <div class="layui-form-item">
@@ -40,7 +43,7 @@
             </div>
         </div>
         <div class="left-under">
-            <div class="background-img" style="background-image: url('../../img/consQuality/AlarmContent.png');">
+            <div class="background-img" style="background-image: url('../../img/personnelControl/PersonnelMovement.png');">
                 <div style="height: 100%;width: 100%;overflow: auto;">
                     <table id="dome" lay-filter="test"></table>
                 </div>