新增仓库地图定位功能

2024-09-03 17:32:49 +08:00
parent 2da0e400f3
commit 12838ef3cd
7 changed files with 820 additions and 90 deletions
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
    "axios": "^0.24.0",
    "bpmn-js": "^9.2.2",
    "core-js": "^3.8.3",
--- a/src/main.js
+++ b/src/main.js
@@ -16,8 +16,11 @@ import eimage from '@/components/E-image/index.vue'
 import moment from 'moment'
 import Print from '@/utils/print' // 引入附件的js文件
 import request from '@/utils/request'
-import { setDefaultOrgPath, setDefaultOrgPathName, setStorage } from './utils/auth.js'
-import VueAMap from 'vue-amap'
+import {
+  setDefaultOrgPath,
+  setDefaultOrgPathName,
+  setStorage
+} from './utils/auth.js'

 Vue.use(ElementUI)

@@ -33,14 +36,35 @@ Vue.filter('dateFormat', function(dateStr, pattern = 'YYYY-MM-DD') {
 })
 Vue.use(Print) // 注册

-Vue.use(VueAMap)
-VueAMap.initAMapApiLoader({
-  key: 'ccda12d8bffc72e9f1a32c599323a876', // 此处的key,在高德开放平台申请
-  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.Geocoder'], // 此处的插件按需添加
-  v: '1.4.4',
-  uiVersion: '1.0'
-})
-
+import AMapLoader from '@amap/amap-jsapi-loader';
+// AMapLoader.load({
+//     key: "0054c9409ec7a97ddfe933224b36f45c", //申请好的Web端开发者 Key，调用 load 时必填
+//     version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
+//     plugins: [
+//       'AMap.ElasticMarker',
+//       'AMap.Geolocation', //定位空间，用来获取和展示用户主机所在的经纬度位置
+//       ' AMap.Autocomplete ', //输入提示插件
+//       ' AMap.PlaceSearch ', //POI搜索插件
+//       ' AMap.Scale ', //右下角缩略图插件，比例尺
+//       ' AMap.OverView ', //地图鹰眼插件
+//       ' AMap.ToolBar ', //地图工具条
+//       ' AMap.MapType ', //类别切换空间，实现默认图层与卫星图，实施交通层之间切换的控制
+//       ' AMap.PolyEditor ', //编辑 折线多边形
+//       ' AMap.CircleEditor ',
+//       "AMap.Geocoder", //地图编码
+//       'AMap.AMapManager',
+//       'AMap.Marker'
+//     ], // 此处的插件按需添加
+//   })
+//   .then((AMap) => {
+//     const map = new AMap.Map("container");
+//   })
+//   .catch((e) => {
+//     console.error(e); //加载错误提示
+//   });
+window._AMapSecurityConfig = {
+  securityJsCode: "e4ce71df213230e89231cc3ef9c98313",
+};
 Vue.config.productionTip = false

 // let token = null
@@ -110,9 +134,12 @@ function getUserInfo() {
 }

 getUserInfo()
+
 function GetQueryString(name) {
  var one = window.location.href.indexOf('?token=') + 7
-  if (one < 7) { return null }
+  if (one < 7) {
+    return null
+  }
  var two = window.location.href.lastIndexOf('&') // + 1
  var data = window.location.href.substr(one)
  if (two > one) {
@@ -125,5 +152,6 @@ function GetQueryString(name) {
  return null
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  var r = window.location.search.substr(1).match(reg)
-  if (r != null) return unescape(r[2]); return null
+  if (r != null) return unescape(r[2]);
+  return null
 }
--- a/src/views/baseInfo/warehouses/warehouse/warehouseAdd.vue
+++ b/src/views/baseInfo/warehouses/warehouse/warehouseAdd.vue
@@ -1,5 +1,7 @@
 <template>
  <div>
+    <div v-show="viewState == 1 ">
+

      <div class="tab-header webtop">
        <!-- 标题 -->
@@ -47,13 +49,23 @@
            <el-input v-model="formobj.squareMeter" placeholder="占地面积" class="item_input" clearable
              oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
          </div>
-        <div class="item">
+          <!--      <div class="item">
          <span class="item_text">仓库经度：</span>
          <el-input v-model="formobj.longitude" placeholder="仓库经度" class="item_input" clearable />
        </div>
        <div class="item">
          <span class="item_text">仓库纬度：</span>
          <el-input v-model="formobj.latitude" placeholder="仓库纬度" class="item_input" clearable />
+        </div> -->
+          <div class="item">
+            <span class="item_text">仓库经纬度：</span>
+            <div class="item_input" style="display: flex;flex-direction: row;align-items: center;">
+              <el-input v-model="formobj.lngAndLat" placeholder="例：116.397428,39.90923" clearable
+                style="margin-right: 20px;" />
+              <span style="height: 40px;width:7%;color: #0294D7;text-decoration: underline ;cursor: pointer;"
+                @click="showMap">地图定位</span>
+            </div>
+
          </div>
          <div class="item">
            <span class="item_text"><span class="must">*</span> 具体地址：</span>
@@ -79,17 +91,25 @@
        </el-card>

      </div>
-
+    </div>
+    <!-- End 查询和其列表部分 -->
+    <!-- 新增修改部分组件 -->
+    <divAdd v-show="viewState == 2 " ref="divadd" @backData="backData" @doback="resetState" />
  </div>
 </template>

 <script>
  import req from '@/api/baseinfo/warehouse/warehouse.js'
+  import divAdd from './warehouseAdd2.vue'
  export default {
-    components: {},
+    components: {
+      divAdd
+    },
    data() {
      return {
+        viewState: 1,
        submitdisabled: false,
+        dialogVisible: false,
        formobj: {
          sid: '',
          warehouseName: '',
@@ -100,6 +120,7 @@
          manager: '',
          longitude: '',
          latitude: '',
+          lngAndLat: '',
          usageStatus: 1,
          address: '',
          squareMeter: '',
@@ -114,6 +135,9 @@
      }
    },
    created() {},
+    mounted() {
+
+    },
    methods: {
      changeTheme(val) {

@@ -186,6 +210,7 @@
          manager: '',
          longitude: '',
          latitude: '',
+          lngAndLat: '',
          usageStatus: 1,
          address: '',
          squareMeter: '',
@@ -211,11 +236,46 @@
            this.formobj = row
          })
      },
+      showMap() {
+        this.viewState = 2
+        this.$refs['divadd'].showAdd()
+      },
+      resetState() {
+        this.viewState = 1
+      },
+      backData(value) {
+        this.viewState = 1
+        console.log('backData：', value)
+        this.formobj.address = value.address
+        this.formobj.lngAndLat = value.lngAndLat
+      }

    }
  }
 </script>
 <style lang="scss" scoped>
+  .g-poi-search {
+    position: absolute;
+    top: 80px;
+    left: 30px;
+    padding: 8px;
+    border-radius: 2px;
+    background-color: #fff;
+    z-index: 100;
+  }
+
+  .g-poi-search .el-select .el-input>input.el-input__inner {
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .g-poi-search-popper .el-select-dropdown__item {
+    width: 200px;
+    height: 28px;
+    line-height: 28px;
+
+  }
+
  // 隐藏上传组件

  ::v-deep .hide {
--- a/src/views/baseInfo/warehouses/warehouse/warehouseAdd2.vue
+++ b/src/views/baseInfo/warehouses/warehouse/warehouseAdd2.vue
@@ -0,0 +1,342 @@
+<template>
+  <div>
+
+    <div class="tab-header webtop">
+      <!-- 标题 -->
+      <div>仓库信息</div>
+      <!-- start 添加修改按钮 -->
+      <div>
+        <el-button type="primary" size="small" @click="saveAddress">保存</el-button>
+        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
+      </div>
+      <!-- end 添加修改按钮 -->
+      <!-- end 详情按钮 -->
+    </div>
+
+    <div class="listconadd">
+      <div class="flex-center" style="padding: 5px;">
+        <div id="mymap" style="height:650px;width:90%;margin-left: 5%;margin-top: 2%;"></div>
+        <div class="g-poi-search" style="display: flex;flex-direction: column;">
+          <span style="">请输入关键字：</span>
+          <el-input id="tipinput" v-model="searchText" style="width:300px;margin-top: 5px;" />
+          <span style="margin-top: 15px;width:300px;">当前地址:{{addressInfo.address}}</span>
+        </div>
+
+
+
+      </div>
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+  import AMapLoader from "@amap/amap-jsapi-loader";
+
+  export default {
+    name: "Home",
+    components: {},
+    data() {
+      return {
+        searchText: '',
+        map: null,
+        geocoder: null,
+        addressInfo: {
+          lngAndLat: "",
+          address: ""
+        },
+        pointList: [],
+        geolocation: null,
+      };
+    },
+    mounted() {
+
+    },
+    methods: {
+      showAdd() {
+        this.initMap();
+      },
+      initMap() {
+        let that = this;
+        window._AMapSecurityConfig = {
+          securityJsCode: "e4ce71df213230e89231cc3ef9c98313",
+        };
+        AMapLoader.load({
+            key: "0054c9409ec7a97ddfe933224b36f45c", // 申请好的Web端开发者Key，首次调用 load 时必填
+            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+          })
+          .then((AMap) => {
+
+            that.map = new AMap.Map("mymap", {
+              // 设置地图容器id
+              viewMode: "3D", // 是否为3D地图模式
+              zoom: 15, // 初始化地图级别
+              center: [116.397428, 39.90923], // 初始化地图中心点位置
+            });
+
+            that.map.plugin("AMap.Geocoder", function() {
+              that.geocoder = new AMap.Geocoder();
+
+
+              //   geocoder.getLocation(address, function (status, result) {
+              //     if (status === "complete" && result.info === "OK") {
+              //       // result中对应详细地理坐标信息
+              //       console.log(result);
+              //     }
+              //   });
+            });
+
+            that.map.plugin('AMap.Geolocation', function() {
+              var geolocation = new AMap.Geolocation({
+                enableHighAccuracy: true, //是否使用高精度定位，默认:true
+                timeout: 10000, //超过10秒后停止定位，默认：5s
+                position: 'RB', //定位按钮的停靠位置
+                offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
+                zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
+
+              });
+              that.geolocation = geolocation
+              that.map.addControl(geolocation);
+              geolocation.getCurrentPosition(function(status, result) {
+                if (status == 'complete') {
+                  that.onComplete(result)
+                } else {
+                  that.onError(result)
+                }
+              });
+
+            });
+
+            //输入提示
+            var autoOptions = {
+              input: "tipinput"
+            };
+
+            that.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
+              var auto = new AMap.AutoComplete(autoOptions);
+              var placeSearch = new AMap.PlaceSearch({
+                map: that.map
+              }); //构造地点查询类
+              auto.on("select", select); //注册监听，当选中某条记录时会触发
+              function select(e) {
+                placeSearch.setCity(e.poi.adcode);
+                placeSearch.search(e.poi.name);
+                placeSearch.search(e.poi.name, function(status, result) {
+                  console.log("placeSearch", result)
+                  that.map.clearMap()
+                  var pois = result.poiList.pois;
+                  for (var i = 0; i < pois.length; i++) {
+                    var poi = pois[i];
+                    var marker = [];
+                    marker[i] = new AMap.Marker({
+                      position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                      title: poi.name
+                    });
+                    // 将创建的点标记添加到已有的地图实例：
+                    //创建点标记的点击事件
+                    marker[i].on("click", function(e) {
+                      console.log("click", e);
+                      that.showInfoWindow2(e)
+                    });
+                    that.map.add(marker[i]);
+                  }
+                  that.map.setFitView();
+                }); //关键字查询查询
+
+              }
+            });
+
+            this.handleClick()
+
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      },
+
+      //解析定位结果
+      onComplete(data) {
+        console.log('定位结果：' + data.position) //经纬度信息
+        let lnglat = data.position;
+        let marker = new AMap.Marker({ //创建标记
+          title: "",
+          position: new AMap.LngLat(lnglat.lng, lnglat.lat)
+        })
+        this.map.clearMap() // 清除所有覆盖物（点标志）
+        this.map.add(marker) // 添加点标志
+        this.showInfoWindow(marker); //自定义信息窗体
+      },
+      //解析定位错误信息
+      onError(data) {
+        console.log('onError：' + data) //经纬度信息
+        this.getLngLatLocation()
+      },
+      //在获取具体定位失败时调用的代码：（非精准定位！！！）
+      getLngLatLocation() {
+        const that = this;
+        that.geolocation.getCityInfo(function(status, result) {
+          if (status === 'complete') {
+            let data = result.position
+            that.address = result.province + result.city;
+            that.showLocation(data)
+          } else {
+            that.$message.error('获取地址失败')
+          }
+        })
+      },
+      //新增标记
+      showLocation(data) {
+        let marker = new AMap.Marker({
+          title: "",
+          position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
+        })
+        this.map.clearMap() // 清除所有覆盖物（点标志）
+        this.map.add(marker) // 添加点标志
+        this.showInfoWindow(marker); //自定义信息窗体
+      },
+      //自定义信息窗体
+      showInfoWindow2(marker) {
+        console.log('showInfoWindow：', marker)
+        let that = this
+        let lnglat = [marker.lnglat.lng, marker.lnglat.lat]
+        let address = ''
+        that.geocoder.getAddress(lnglat, function(status, result) {
+          if (status === 'complete' && result.regeocode) {
+            address = result.regeocode.formattedAddress;
+            that.addressInfo.address = result.regeocode.formattedAddress;
+            that.addressInfo.lngAndLat = marker.lnglat.lng + ',' + marker.lnglat.lat
+            let infoWindow = new AMap.InfoWindow({
+              isCustom: true, //是否自定义信息窗体
+              content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`,
+              // content: marker.content,
+              closeWhenClickMap: true,
+              zIndex: 999,
+              offset: new AMap.Pixel(15, -20)
+            });
+            infoWindow.open(that.map, lnglat);
+
+          } else {
+            // console.log('getAddress：', '根据经纬度查询地址失败')
+            // that.$message.error('根据经纬度查询地址失败')
+          }
+        })
+
+      },
+      //自定义信息窗体
+      showInfoWindow(marker) {
+        console.log('showInfoWindow：', marker)
+        let that = this
+        let lnglat = [marker._position.lng, marker._position.lat]
+        let address = ''
+        that.geocoder.getAddress(lnglat, function(status, result) {
+          if (status === 'complete' && result.regeocode) {
+            address = result.regeocode.formattedAddress;
+            that.addressInfo.address = result.regeocode.formattedAddress;
+            that.addressInfo.lngAndLat = marker._position.lng + ',' + marker._position.lat
+            let infoWindow = new AMap.InfoWindow({
+              isCustom: true, //是否自定义信息窗体
+              content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`,
+              // content: marker.content,
+              closeWhenClickMap: true,
+              zIndex: 999,
+              offset: new AMap.Pixel(16, -35)
+            });
+            infoWindow.open(that.map, marker.getPosition());
+
+          } else {
+            // console.log('getAddress：', '根据经纬度查询地址失败')
+            // that.$message.error('根据经纬度查询地址失败')
+          }
+        })
+
+      },
+      //点击地图获取地理位置
+      handleClick() {
+        this.map.on('click', (e) => {
+          let lng = e.lnglat.lng
+          let lat = e.lnglat.lat
+          console.log('handleClick：', e)
+          let marker = new AMap.Marker({
+            position: new AMap.LngLat(lng, lat),
+          })
+          this.map.clearMap() // 清除所有覆盖物（点标志）
+          this.map.add(marker) // 添加点标志
+          let lnglat = [lng, lat]
+          let that = this
+          that.geocoder.getAddress(lnglat, function(status, result) {
+            if (status === 'complete' && result.regeocode) {
+              console.log('getAddress：', result.regeocode)
+              that.addressInfo.address = result.regeocode.formattedAddress;
+              that.addressInfo.lngAndLat = lng + ',' + lat
+              that.showInfoWindow(marker); //自定义信息窗体
+              // let thisPosition = {
+              //   address: that.address,
+              //   lng: lng,
+              //   lat: lat
+              // };
+              // that.$emit("select", thisPosition) //返回给父组件
+
+            } else {
+              console.log('getAddress：', '根据经纬度查询地址失败')
+              that.$message.error('根据经纬度查询地址失败')
+            }
+          })
+        })
+      },
+
+      // 添加修改返回
+      saveAddress() {
+        this.$emit('backData', this.addressInfo)
+        this.searchText = ''
+        this.map = null
+        this.geocoder = null
+        this.addressInfo = {
+          lngAndLat: "",
+          address: ""
+        }
+        this.pointList = []
+        this.geolocation = null
+      },
+      // 返回
+      handleReturn() {
+        this.searchText = ''
+        this.map = null
+        this.geocoder = null
+        this.addressInfo = {
+          lngAndLat: "",
+          address: ""
+        }
+        this.pointList = []
+        this.geolocation = null
+        this.$emit('doback')
+      }
+
+
+    }
+  };
+</script>
+<style scoped>
+  .g-poi-search {
+    position: absolute;
+    top: 100px;
+    left: 130px;
+    padding: 8px;
+    border-radius: 2px;
+    background-color: #fff;
+    border: 1px #c1c1c1 solid;
+  }
+
+  .g-poi-search .el-select .el-input>input.el-input__inner {
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .g-poi-search-popper .el-select-dropdown__item {
+    width: 200px;
+    height: 28px;
+    line-height: 28px;
+
+  }
+</style>
--- a/src/views/baseInfo/warehouses/warehouse/warehouseAdd3.vue
+++ b/src/views/baseInfo/warehouses/warehouse/warehouseAdd3.vue
@@ -0,0 +1,292 @@
+<template>
+
+  <div class="flex-center" style="padding: 5px;">
+    <div id="mymap" style="height:650px;width:90%;margin-left: 5%;margin-top: 2%;"></div>
+    <div class="g-poi-search">
+      <!-- <span style="">请输入关键字：</span> -->
+      <el-input id="tipinput" v-model="searchText" style="width:300px;margin-top: 5px;" />
+      <!-- <span style="margin-top: 15px;width:300px;">当前地址:{{addressInfo.address}}</span> -->
+    </div>
+
+  </div>
+
+
+</template>
+
+<script>
+  import AMapLoader from "@amap/amap-jsapi-loader";
+
+  export default {
+    name: "Home",
+    components: {},
+    data() {
+      return {
+        searchText: '',
+        map: null,
+        geocoder: null,
+        addressInfo: {
+          lngAndLat: "",
+          address: ""
+        },
+        pointList: [],
+        geolocation: null,
+      };
+    },
+    mounted() {
+
+    },
+    methods: {
+      showAdd() {
+        this.initMap();
+      },
+      initMap() {
+        let that = this;
+        window._AMapSecurityConfig = {
+          securityJsCode: "e4ce71df213230e89231cc3ef9c98313",
+        };
+        AMapLoader.load({
+            key: "0054c9409ec7a97ddfe933224b36f45c", // 申请好的Web端开发者Key，首次调用 load 时必填
+            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+            plugins: [], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
+          })
+          .then((AMap) => {
+
+            that.map = new AMap.Map("mymap", {
+              // 设置地图容器id
+              viewMode: "3D", // 是否为3D地图模式
+              zoom: 15, // 初始化地图级别
+              center: [116.397428, 39.90923], // 初始化地图中心点位置
+            });
+
+            //输入提示
+            var autoOptions = {
+              input: "tipinput"
+            };
+
+            that.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function() {
+              var auto = new AMap.AutoComplete(autoOptions);
+              var placeSearch = new AMap.PlaceSearch({
+                map: that.map
+              }); //构造地点查询类
+              auto.on("select", select); //注册监听，当选中某条记录时会触发
+              function select(e) {
+                console.log("placeSearch", e)
+                placeSearch.setCity(e.poi.adcode);
+                placeSearch.search(e.poi.name);
+                // placeSearch.search(e.poi.name, function(status, result) {
+                //   console.log("placeSearch", result)
+                //   that.map.clearMap()
+                //   var pois = result.poiList.pois;
+                //   for (var i = 0; i < pois.length; i++) {
+                //     var poi = pois[i];
+                //     var marker = [];
+                //     marker[i] = new AMap.Marker({
+                //       position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+                //       title: poi.name
+                //     });
+                //     // 将创建的点标记添加到已有的地图实例：
+                //     //创建点标记的点击事件
+                //     marker[i].on("click", function(e) {
+                //       console.log("click", e);
+                //       that.showInfoWindow2(e)
+                //     });
+                //     that.map.add(marker[i]);
+                //   }
+                //   that.map.setFitView();
+                // }); //关键字查询查询
+
+              }
+            });
+
+            // this.handleClick()
+
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      },
+
+      //解析定位结果
+      onComplete(data) {
+        console.log('定位结果：' + data.position) //经纬度信息
+        let lnglat = data.position;
+        let marker = new AMap.Marker({ //创建标记
+          title: "",
+          position: new AMap.LngLat(lnglat.lng, lnglat.lat)
+        })
+        this.map.clearMap() // 清除所有覆盖物（点标志）
+        this.map.add(marker) // 添加点标志
+        this.showInfoWindow(marker); //自定义信息窗体
+      },
+      //解析定位错误信息
+      onError(data) {
+        console.log('onError：' + data) //经纬度信息
+        this.getLngLatLocation()
+      },
+      //在获取具体定位失败时调用的代码：（非精准定位！！！）
+      getLngLatLocation() {
+        const that = this;
+        that.geolocation.getCityInfo(function(status, result) {
+          if (status === 'complete') {
+            let data = result.position
+            that.address = result.province + result.city;
+            that.showLocation(data)
+          } else {
+            that.$message.error('获取地址失败')
+          }
+        })
+      },
+      //新增标记
+      showLocation(data) {
+        let marker = new AMap.Marker({
+          title: "",
+          position: new AMap.LngLat(data[0], data[1]) //参数为经纬度
+        })
+        this.map.clearMap() // 清除所有覆盖物（点标志）
+        this.map.add(marker) // 添加点标志
+        this.showInfoWindow(marker); //自定义信息窗体
+      },
+      //自定义信息窗体
+      showInfoWindow2(marker) {
+        console.log('showInfoWindow：', marker)
+        let that = this
+        let lnglat = [marker.lnglat.lng, marker.lnglat.lat]
+        let address = ''
+        that.geocoder.getAddress(lnglat, function(status, result) {
+          if (status === 'complete' && result.regeocode) {
+            address = result.regeocode.formattedAddress;
+            that.addressInfo.address = result.regeocode.formattedAddress;
+            that.addressInfo.lngAndLat = marker.lnglat.lng + ',' + marker.lnglat.lat
+            let infoWindow = new AMap.InfoWindow({
+              isCustom: true, //是否自定义信息窗体
+              content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`,
+              // content: marker.content,
+              closeWhenClickMap: true,
+              zIndex: 999,
+              offset: new AMap.Pixel(15, -20)
+            });
+            infoWindow.open(that.map, lnglat);
+
+          } else {
+            // console.log('getAddress：', '根据经纬度查询地址失败')
+            // that.$message.error('根据经纬度查询地址失败')
+          }
+        })
+
+      },
+      //自定义信息窗体
+      showInfoWindow(marker) {
+        console.log('showInfoWindow：', marker)
+        let that = this
+        let lnglat = [marker._position.lng, marker._position.lat]
+        let address = ''
+        that.geocoder.getAddress(lnglat, function(status, result) {
+          if (status === 'complete' && result.regeocode) {
+            address = result.regeocode.formattedAddress;
+            that.addressInfo.address = result.regeocode.formattedAddress;
+            that.addressInfo.lngAndLat = marker._position.lng + ',' + marker._position.lat
+            let infoWindow = new AMap.InfoWindow({
+              isCustom: true, //是否自定义信息窗体
+              content: `<div style="background-color: white;padding: 5px; border-radius: 5px;border: 1px solid #cccccc;"> 地址：${address}</div>`,
+              // content: marker.content,
+              closeWhenClickMap: true,
+              zIndex: 999,
+              offset: new AMap.Pixel(16, -35)
+            });
+            infoWindow.open(that.map, marker.getPosition());
+
+          } else {
+            // console.log('getAddress：', '根据经纬度查询地址失败')
+            // that.$message.error('根据经纬度查询地址失败')
+          }
+        })
+
+      },
+      //点击地图获取地理位置
+      handleClick() {
+        this.map.on('click', (e) => {
+          let lng = e.lnglat.lng
+          let lat = e.lnglat.lat
+          console.log('handleClick：', e)
+          let marker = new AMap.Marker({
+            position: new AMap.LngLat(lng, lat),
+          })
+          this.map.clearMap() // 清除所有覆盖物（点标志）
+          this.map.add(marker) // 添加点标志
+          let lnglat = [lng, lat]
+          let that = this
+          that.geocoder.getAddress(lnglat, function(status, result) {
+            if (status === 'complete' && result.regeocode) {
+              console.log('getAddress：', result.regeocode)
+              that.addressInfo.address = result.regeocode.formattedAddress;
+              that.addressInfo.lngAndLat = lng + ',' + lat
+              that.showInfoWindow(marker); //自定义信息窗体
+              // let thisPosition = {
+              //   address: that.address,
+              //   lng: lng,
+              //   lat: lat
+              // };
+              // that.$emit("select", thisPosition) //返回给父组件
+
+            } else {
+              console.log('getAddress：', '根据经纬度查询地址失败')
+              that.$message.error('根据经纬度查询地址失败')
+            }
+          })
+        })
+      },
+
+      // 添加修改返回
+      saveAddress() {
+        this.$emit('backData', this.addressInfo)
+        // this.searchText = ''
+        // this.map = null
+        // this.geocoder = null
+        // this.addressInfo = {
+        //   lngAndLat: "",
+        //   address: ""
+        // }
+        // this.pointList = []
+        // this.geolocation = null
+      },
+      // 返回
+      handleReturn() {
+        // this.searchText = ''
+        // this.map = null
+        // this.geocoder = null
+        // this.addressInfo = {
+        //   lngAndLat: "",
+        //   address: ""
+        // }
+        // this.pointList = []
+        // this.geolocation = null
+        this.$emit('doback')
+      }
+
+
+    }
+  };
+</script>
+<style scoped>
+  .g-poi-search {
+    position: absolute;
+    top: 100px;
+    left: 130px;
+    padding: 8px;
+    border-radius: 2px;
+    background-color: #fff;
+    border: 1px #c1c1c1 solid;
+  }
+
+  .g-poi-search .el-select .el-input>input.el-input__inner {
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .g-poi-search-popper .el-select-dropdown__item {
+    width: 200px;
+    height: 28px;
+    line-height: 28px;
+
+  }
+</style>
--- a/src/views/system/organizationManage/organizationManage.vue
+++ b/src/views/system/organizationManage/organizationManage.vue
@@ -450,8 +450,15 @@
        console.log('zgNamesChange:', val)
        const choose = this.staffdata.filter((item) => item.sid == val)
        console.log('>>>>>>>>>zgNamesChange', choose)
+
+        if (choose != null && choose.length > 0) {
          this.form.zgNames = choose[0].name
          this.form.zgStaffSid = choose[0].sid
+        } else {
+          this.form.zgNames = ''
+          this.form.zgStaffSid = ''
+        }
+
      },
      save() {
        if (this.fgStaffSid.length > 0) {
--- a/src/views/system/roleAdminister/roleAdminister.vue
+++ b/src/views/system/roleAdminister/roleAdminister.vue
@@ -489,7 +489,7 @@
      this.formBackup = Object.assign({}, this.roleForm)
      this.getroleOrgList()
      this.getPostList()
-      this.getType()
+      // this.getType()
    },
    methods: {
      pagination(val) { // 分页函数