From 39bfbe0ac817239a6f85ff2026b3cdfabec5b9d6 Mon Sep 17 00:00:00 2001
From: yxq <y1530857136@qq.com>
Date: Sat, 5 Aug 2023 12:06:02 +0800
Subject: [PATCH] =?UTF-8?q?web=E8=80=83=E5=8B=A4=E8=A7=84=E5=88=99?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Views/ADR_Restriction/Form.cshtml         | 162 +++++++++++++++++-
 .../Views/ADR_Restriction/Index.js            |   4 +-
 2 files changed, 163 insertions(+), 3 deletions(-)

diff --git a/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml b/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml
index bf5832caa..23b07dead 100644
--- a/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml	
+++ b/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Form.cshtml	
@@ -89,7 +89,167 @@
     </div>
     <div class="col-xs-12 lr-form-item" data-table="ADR_Restriction">
         <div class="lr-form-item-title">地图</div>
-        <div></div>
+        <div>
+            <script type="text/javascript"
+                    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=j1TvNK854LRvVuxuAhNNxdhKVB0KbEZD"></script>
+            <div style="display:flex">
+                <div id="r-result">
+                    <div>请输入地址进行搜索：</div>
+                    <input type="text"
+                               id="suggestId"
+                               size="20"
+                               value="百度"
+                               style="width: 150px" />
+                </div>
+                <div id="container" style="flex:1;height:400px"></div>
+            </div>
+            
+            
+            <div id="searchResultPanel"
+                 style="
+                    border: 1px solid #c0c0c0;
+                    width: 150px;
+                    height: auto;
+                    display: none;
+                  "></div>
+            <script>
+
+                function initMap() {
+                    var currentPoint = {}, //经纬度 {lng,lat}
+                        radius = 20, //打卡距离(m)
+                        map = new BMapGL.Map("container", {
+                            // enableRotate: false,
+                            // enableTilt: false,
+                        }), // 创建地图实例
+                        point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
+                    map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
+                    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
+                    //   map.setHeading(64.5); //设置地图旋转角度
+                    //   map.setTilt(73); //设置地图的倾斜角度
+
+                    var ac = new BMapGL.Autocomplete({
+                        //建立一个自动完成的对象
+                        input: "suggestId",
+                        location: map,
+                    });
+                    ac.addEventListener("onhighlight", function (e) {
+                        //鼠标放在下拉列表上的事件
+                        var str = "";
+                        var _value = e.fromitem.value;
+                        var value = "";
+                        if (e.fromitem.index > -1) {
+                            value =
+                                _value.province +
+                                _value.city +
+                                _value.district +
+                                _value.street +
+                                _value.business;
+                        }
+                        str =
+                            "FromItem<br />index = " +
+                            e.fromitem.index +
+                            "<br />value = " +
+                            value;
+
+                        value = "";
+                        if (e.toitem.index > -1) {
+                            _value = e.toitem.value;
+                            value =
+                                _value.province +
+                                _value.city +
+                                _value.district +
+                                _value.street +
+                                _value.business;
+                        }
+                        str +=
+                            "<br />ToItem<br />index = " +
+                            e.toitem.index +
+                            "<br />value = " +
+                            value;
+                        //   G("searchResultPanel")
+                        document.getElementById("searchResultPanel").innerHTML = str;
+                    });
+                    var myValue;
+                    ac.addEventListener("onconfirm", function (e) {
+                        //鼠标点击下拉列表后的事件
+                        var _value = e.item.value;
+                        myValue =
+                            _value.province +
+                            _value.city +
+                            _value.district +
+                            _value.street +
+                            _value.business;
+                        document.getElementById("searchResultPanel").innerHTML =
+                            "onconfirm<br />index = " +
+                            e.item.index +
+                            "<br />myValue = " +
+                            myValue;
+                        $('#GPSAddr').val(myValue)
+                        setPlace();
+                    });
+                    function setPlace() {
+                        map.clearOverlays(); //清除地图上所有覆盖物
+                        function myFun() {
+                            currentPoint = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
+                            setPointVal(currentPoint)
+                            map.centerAndZoom(currentPoint, 18);
+                            map.addOverlay(new BMapGL.Marker(currentPoint)); //添加标注
+                            setCircle(currentPoint)//设置圆
+                        }
+                        var local = new BMapGL.LocalSearch(map, {
+                            //智能搜索
+                            onSearchComplete: myFun,
+                        });
+                        local.search(myValue);
+                    }
+
+                    //  点击事件
+                    map.addEventListener("click", function (e) {
+                        // alert("点击的经纬度：" + e.latlng.lng + ", " + e.latlng.lat);
+                        // var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
+                        // alert("点的墨卡托坐标：" + mercator[0] + ", " + mercator[1]);
+
+                        map.clearOverlays(); //清除地图上所有覆盖物
+                        var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
+                        var marker = new BMapGL.Marker(point); // 创建标注
+                        map.addOverlay(marker); // 将标注添加到地图中
+                        currentPoint = point;
+                        setPointVal(point)
+                        setCircle(point)//设置圆
+                    });
+
+                    //范围改变
+                    $('#GPSRange').change(function () {
+                        console.log(111)
+                    })
+
+                    //创建圆
+                    function setCircle(point) {
+                        let GPSRange = $('#GPSRange').val()
+                        if (GPSRange && Number(GPSRange) != NaN && Number(GPSRange) >= 1) {
+                            radius = GPSRange
+                        } else {
+                            $('#GPSRange').val('20')
+                            radius = 20
+                        }
+                        var circle = new BMapGL.Circle(point, radius, {
+                            strokeColor: "blue",
+                            strokeWeight: 2,
+                            strokeOpacity: 0.5,
+                        }); //创建圆
+                        map.addOverlay(circle);
+                    }
+
+                    //经纬度改变
+                    function setPointVal(point) {
+                        $('#GPSLon').val(point.lng)
+                        $('#GPSLat').val(point.lat)
+                    }
+
+                }
+                initMap()
+            </script>
+        </div>
     </div>
     <div class="col-xs-6 lr-form-item" data-table="ADR_Restriction">
         <div class="lr-form-item-title">经度<font face="宋体">*</font></div>
diff --git a/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Index.js b/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Index.js
index c07a7f913..703a11498 100644
--- a/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Index.js	
+++ b/Learun.Framework.Ultimate V7/Learun.Application.Web/Areas/PersonnelManagement/Views/ADR_Restriction/Index.js	
@@ -54,8 +54,8 @@ var bootstrap = function ($, learun) {
                         id: 'form',
                         title: '编辑',
                         url: top.$.rootUrl + '/PersonnelManagement/ADR_Restriction/Form?keyValue=' + keyValue,
-                        width: 600,
-                        height: 520,
+                        width: 880,
+                        height: 960,
                         callBack: function (id) {
                             return top[id].acceptClick(refreshGirdData);
                         }