功能优化

public/index.html

@@ -10,7 +10,10 @@
     <!--[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>-->
+<!--    <script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>-->
+    <script async src="http://10.1.0.142:2000/mybaidu/api?v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+    <script src="http://10.1.0.142:2000/mybaidu/api?type=webgl&v=2.0&ak=cClgLBaLgGUdQDilX9dGvieL"></script>
+    <script type="text/javascript" src="http://10.1.0.142:2000/mybaidu/library/TrackAnimation/src/TrackAnimation_min.js"></script>
 	  <style>
     html,
     body,

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: [
@@ -470,13 +522,95 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
+      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
       this.getList();
     },
     // 提交上传文件
     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>