From 997d14c54c738acb61755e4410a8e18afb69b245 Mon Sep 17 00:00:00 2001
From: hayu <1604366271@qq.com>
Date: Fri, 15 Nov 2024 11:10:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html               |   3 +
 src/views/system/dept/index.vue | 140 +++++++++++++++++++++++++++++++-
 2 files changed, 140 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 925455c..019d5d9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,9 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+    <script async src="https://api.map.baidu.com/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+    <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+    <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
 	  <style>
     html,
     body,
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index af5ce12..d6272c4 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -105,6 +105,36 @@
 
     <!-- 添加或修改部门对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+
+      <!-- 内层对话框 选择地图 -->
+      <el-dialog
+        width="70%"
+        title="选择地图"
+        :visible.sync="innerVisible"
+        v-if="innerVisible"
+        append-to-body
+      >
+        <el-row class="search-container">
+          <el-input
+            clearable
+            placeholder="请输入地址"
+            v-model="searchAddress"
+            @keyup.enter.native="onSearchAddress"
+          />
+          <el-button
+            type="primary"
+            style="width: 120px"
+            @click="onSearchAddress"
+          >搜索</el-button
+          >
+        </el-row>
+        <div
+          id="map-container"
+          style="height: 550px; background-color: #bfc"
+        >
+        </div>
+      </el-dialog>
+
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
@@ -192,8 +222,23 @@
         </el-row>
         <el-row>
           <el-col :span="24">
+            <el-form-item>
+              <el-button type="primary" @click="handleProjectAddress"
+              >选择位置</el-button>
+            </el-form-item>
+            <el-form-item label="经度" prop="lon">
+              <el-input disabled v-model="form.lon" />
+            </el-form-item>
+            <el-form-item label="纬度" prop="lat">
+              <el-input disabled v-model="form.lat" />
+            </el-form-item>
+
             <el-form-item label="位置" prop="address">
-              <el-input v-model="form.address" placeholder="请输入位置" maxlength="50"/>
+              <el-input
+                v-model="form.address"
+                disabled
+                style="width: 60%"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -244,6 +289,9 @@ export default {
   components: { Treeselect },
   data() {
     return {
+      innerVisible: false,
+      map: null,
+      searchAddress: '',
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -270,7 +318,11 @@ export default {
       isDepartmentList:[{id:'0',name:'否'},{id:'1',name:'是'}],
       provinceList:["北京","上海","天津","重庆","河北","山西","内蒙古","辽宁","吉林","黑龙江","江苏","浙江","安徽","福建","江西","山东","河南","湖北","湖南","广东","广西","海南","四川","贵州","云南","西藏","陕西","甘肃","宁夏","青海","新疆","香港","澳门","台湾"],
       // 表单参数
-      form: {},
+      form: {
+        lon: '',
+        lat: '',
+        address: '',
+      },
       // 表单校验
       rules: {
           parentId: [
@@ -476,7 +528,89 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
-    }
+    },
+    /** 选择工程地址 */
+    handleProjectAddress() {
+      const this_ = this;
+      this.searchAddress = '';
+      this.innerVisible = true;
+
+      this.$nextTick(() => {
+          this_.map = new BMapGL.Map('map-container'); // 创建地图实例
+          let point;
+          if (this_.form.lon != null && this_.form.lon !== '' && this_.form.lat != null && this_.form.lat !== '') {
+            console.log(this_.form.lat, this_.form.lon);
+            point = new BMapGL.Point(this_.form.lon, this_.form.lat);
+            let marker = new BMapGL.Marker(point); // 创建标点
+            this_.map.addOverlay(marker);
+          } else {
+            point = new BMapGL.Point(117.13805, 31.8734); // 创建点坐标
+          }
+
+          this_.map.centerAndZoom(point, 12); // 初始化地图，设置中心点坐标和地图级别
+          this_.map.enableScrollWheelZoom(true); // 启用滚轮放大缩小
+
+          // 禁用不必要的功能
+          // this_.map.disableDragging(); // 禁用拖拽
+          this_.map.disableDoubleClickZoom(); // 禁用双击缩放
+          this_.map.disablePinchToZoom(); // 禁用多点触控缩放
+          this_.map.disableKeyboard(); // 禁用键盘操作
+
+          var geoc = new BMapGL.Geocoder();
+
+          this_.map.addEventListener('click', function (e) {
+            var pt = e.latlng;
+            geoc.getLocation(pt, function (res) {
+              var addComp = res.addressComponents;
+              this_.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
+              this_.form.lon = e.latlng.lng;
+              this_.form.lat = e.latlng.lat;
+            });
+            this_.map.clearOverlays();
+            point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
+            let marker = new BMapGL.Marker(point); // 创建标点
+            this_.map.addOverlay(marker);
+          });
+      });
+    },
+    /* 搜索 */
+    onSearchAddress() {
+
+      // 创建地址
+      const myGeo = new BMapGL.Geocoder()
+      const _this = this
+      myGeo.getPoint(
+        this.searchAddress,
+        function (point) {
+          if (point) {
+            _this.map.clearOverlays()
+            const { lng, lat } = point
+
+            _this.map.centerAndZoom(point, 16)
+            _this.map.addOverlay(
+              new BMapGL.Marker(point, {
+                title: _this.searchAddress,
+              }),
+            )
+            // 根据坐标得到地址描述
+            myGeo.getLocation(
+              new BMapGL.Point(lng, lat),
+              function (result) {
+                if (result) {
+                  let addComp = result.addressComponents
+                  _this.form.address = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`
+                  _this.form.lon = lng
+                  _this.form.lat = lat
+                }
+              },
+            )
+          } else {
+            this.$message.error('您输入的地址有误，请重新输入')
+          }
+        },
+        '中国',
+      )
+    },
   }
 };
 </script>