From de5761f200ac407f8d81d1ba5c8d7817d7a8f1db Mon Sep 17 00:00:00 2001
From: anlworke <978080633@qq.com>
Date: Thu, 12 Oct 2023 17:32:45 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=AB=98?=
 =?UTF-8?q?=E5=BE=B7=E5=9C=B0=E5=9B=BEkey=E5=8F=8A=E5=AE=89=E5=85=A8?=
 =?UTF-8?q?=E5=AF=86=E9=92=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 thinglinks-ui/src/main.js                     |   7 +-
 .../src/views/link/device/mapView.vue         | 231 +++++++++++-------
 2 files changed, 142 insertions(+), 96 deletions(-)

diff --git a/thinglinks-ui/src/main.js b/thinglinks-ui/src/main.js
index a7f6c9e6..281e02c8 100644
--- a/thinglinks-ui/src/main.js
+++ b/thinglinks-ui/src/main.js
@@ -51,10 +51,11 @@ import DictData from '@/components/DictData'
 // 引入百度地图
 import BaiduMap from 'vue-baidu-map'
 
+
 // 引入高德
 import AmapVue from '@amap/amap-vue';
 AmapVue.config.version = '2.0'; // 默认2.0，这里可以不修改
-AmapVue.config.key = 'e13456422e8fe93451cf2201f4db84bd'; //服务平台选择 Web端(JS API)
+AmapVue.config.key = 'a7875e62299794a32054f208842e0c34'; //服务平台选择 Web端(JS API)
 AmapVue.config.plugins = [
   'AMap.moveAnimation',
   'AMap.Geocoder',
@@ -62,6 +63,10 @@ AmapVue.config.plugins = [
   'AMap.PlaceSearch',
   // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载
 ];
+// 新版本的Web端开发者安全密钥
+window._AMapSecurityConfig = {
+  securityJsCode: "51346fc6439b2d535eff510407d3a5bb",
+};
 Vue.use(AmapVue);
 
 // 全局方法挂载
diff --git a/thinglinks-ui/src/views/link/device/mapView.vue b/thinglinks-ui/src/views/link/device/mapView.vue
index 27ec2d9f..061ddd17 100644
--- a/thinglinks-ui/src/views/link/device/mapView.vue
+++ b/thinglinks-ui/src/views/link/device/mapView.vue
@@ -2,42 +2,76 @@
   <div class="wrap">
     <el-form>
       <el-row>
-        <el-col :span='2'></el-col>
+        <el-col :span="2"></el-col>
         <el-col :span="12">
           <el-form-item label="省市区" label-width="85px">
-            <el-select v-model="provinceValue" placeholder="省份" @change="provinceE">
-              <el-option v-for="item in province" :key="item.value" :label="item.name" :value="item.name">
+            <el-select
+              v-model="provinceValue"
+              placeholder="省份"
+              @change="provinceE"
+            >
+              <el-option
+                v-for="item in province"
+                :key="item.value"
+                :label="item.name"
+                :value="item.name"
+              >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span='12'>
+        <el-col :span="12">
           <el-form-item label="地级市" label-width="80px">
             <el-select v-model="cityValue" placeholder="市级" @change="cityE">
-              <el-option v-for="item in city" :key="item.value" :label="item.name" :value="item.name">
+              <el-option
+                v-for="item in city"
+                :key="item.value"
+                :label="item.name"
+                :value="item.name"
+              >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span='12'>
+        <el-col :span="12">
           <el-form-item label="区县" label-width="80px">
             <el-select v-model="areaValue" placeholder="区县" @change="areaE">
-              <el-option v-for="item in area" :key="item.value" :label="item.name" :value="item.name">
+              <el-option
+                v-for="item in area"
+                :key="item.value"
+                :label="item.name"
+                :value="item.name"
+              >
               </el-option>
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span='4'></el-col>
+        <el-col :span="4"></el-col>
       </el-row>
       <el-row>
         <el-col :span="21">
           <el-form-item label="详细地址" label-width="75px">
-            <el-select style="width: 97%;margin: auto;" v-model="address" filterable remote reserve-keyword clearable
-              placeholder="详细地址" :remote-method="remoteMethod" :loading="loading" @change="tipChange">
-              <el-option v-for="item in tips" :key="item.id" :label="item.name" :value="item.id">
+            <el-select
+              style="width: 97%; margin: auto"
+              v-model="address"
+              filterable
+              remote
+              reserve-keyword
+              clearable
+              placeholder="详细地址"
+              :remote-method="remoteMethod"
+              :loading="loading"
+              @change="tipChange"
+            >
+              <el-option
+                v-for="item in tips"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
                 <span style="float: left">{{ item.name }}</span>
                 <span style="float: right; color: #8492a6; font-size: 13px">{{
-                item.district
+                  item.district
                 }}</span>
               </el-option>
               <i slot="suffix" class="el-input__icon el-icon-date"></i>
@@ -46,11 +80,11 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span='22'>
-          <div ref="asd" style="width: 95%; height: 300px;margin: auto;"></div>
+        <el-col :span="22">
+          <div ref="asd" style="width: 95%; height: 300px; margin: auto"></div>
         </el-col>
       </el-row>
-      <el-row style="margin-top: 15px;">
+      <el-row style="margin-top: 15px">
         <el-col :span="11">
           <el-form-item label="纬度" prop="latitude" label-width="120px">
             <el-input v-model="latitude" placeholder="请输入纬度" />
@@ -69,8 +103,9 @@
 
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+
 export default {
-  name: 'HelloWorld',
+  name: "HelloWorld",
   data() {
     return {
       address: "",
@@ -85,34 +120,34 @@ export default {
       geocoder: null,
       districtSearch: null,
       //三級聯動
-      flag: 'province',
+      flag: "province",
       province: [],
       city: [],
       area: [],
-      provinceValue: '',
-      cityValue: '',
-      areaValue: '',
+      provinceValue: "",
+      cityValue: "",
+      areaValue: "",
       //搜索提示
       tips: [],
       //三级、详细信息
       deviceLocation: {},
-    }
+    };
   },
   watch: {
     provinceValue(newVal) {
       console.log(111);
       console.log(this.provinceValue);
       console.log(newVal);
-      if(this.isEmptyStr(newVal)){
+      if (this.isEmptyStr(newVal)) {
         return;
       }
-      if(this.province.length == 0){
+      if (this.province.length == 0) {
         return;
       }
-      if(this.provinceValue == newVal){
+      if (this.provinceValue == newVal) {
         return;
       }
-      this.provinceE(newVal)
+      this.provinceE(newVal);
     },
     // cityValue() {
     //   this.areaE()
@@ -123,21 +158,21 @@ export default {
   },
   methods: {
     isEmptyStr(s) {
-      if (s == undefined || s == null || s == '') {
-        return true
+      if (s == undefined || s == null || s == "") {
+        return true;
       }
-      return false
+      return false;
     },
     TheMap(lonLat) {
-      this.address = '';
-      this.provinceValue = '';
-      this.cityValue = '';
-      this.areaValue = '';
-      this.latitude = '';
-      this.longitude = '';
-      let _this = this
+      this.address = "";
+      this.provinceValue = "";
+      this.cityValue = "";
+      this.areaValue = "";
+      this.latitude = "";
+      this.longitude = "";
+      let _this = this;
       AMapLoader.load({
-        key: "e13456422e8fe93451cf2201f4db84bd", // 申请好的Web端开发者Key，首次调用 load 时必填
+        key: "a7875e62299794a32054f208842e0c34", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [
           "AMap.DistrictSearch",
@@ -145,7 +180,7 @@ export default {
           "AMap.AutoComplete ", //2.0版本是AMap.AutoComplete，    2.0以下是AMap.Autocomplete
           // 输入提示插件
           "AMap.PlaceSearch", // POI搜索插件
-          "AMap.AutoComplete"
+          "AMap.AutoComplete",
         ],
       }).then(() => {
         _this.initMap();
@@ -171,22 +206,24 @@ export default {
       this.geocoder = new window.AMap.Geocoder({
         city: "010", //城市设为北京，默认：“全国”
         radius: 500, //范围，默认：500
-        extensions: 'all'
-      })
+        extensions: "all",
+      });
+      console.log(this.geocoder);
     },
     initDistrictSearch() {
-      let _this = this
+      let _this = this;
       this.districtSearch = new window.AMap.DistrictSearch({
         //  显示下级行政区级数，1表示返回下一级行政区
         subdistrict: 3,
         extensions: "base",
-      })
+      });
       // 搜索所有省/直辖市信息
-      this.districtSearch.search('中国', function (status, result) {
+      this.districtSearch.search("中国", function (status, result) {
+        console.log(result);
         console.log(result.districtList[0].districtList);
         // 查询成功时，result即为对应的行政区信息
-        _this.province = result.districtList[0].districtList
-      })
+        _this.province = result.districtList[0].districtList;
+      });
     },
     initAutoComplete(queryValue) {
       const _this = this;
@@ -205,7 +242,7 @@ export default {
     },
     // 地图点击事件
     mapClick(e) {
-      this.initDistrictSearch()
+      this.initDistrictSearch();
       if (this.map !== undefined) {
         this.lonLat = e.lnglat.lng + "," + e.lnglat.lat;
         this.regeoCode(this.lonLat);
@@ -218,8 +255,8 @@ export default {
         this.latitude = lnglat[0];
         this.longitude = lnglat[1];
         this.$emit("locationChange", lnglat);
-        this.MapMarker(lnglat)
-        this.getAddress(lnglat)
+        this.MapMarker(lnglat);
+        this.getAddress(lnglat);
       }
     },
     //添加标记点
@@ -242,106 +279,111 @@ export default {
     },
     // 把拿到的经纬度转化为地址信息
     getAddress(lnglat) {
-      const _this = this
+      const _this = this;
       _this.geocoder.getAddress(lnglat, (status, result) => {
-        let resp = result.regeocode.addressComponent
         console.log(result);
-        _this.locationValue = [resp.province, resp.city, resp.district,]
-        _this.provinceValue = resp.province
-        _this.cityValue = resp.city
-        _this.areaValue = resp.district
-        if (status === 'complete' && result.info === 'OK') {
+        let resp = result.regeocode.addressComponent;
+        console.log(result);
+        _this.locationValue = [resp.province, resp.city, resp.district];
+        _this.provinceValue = resp.province;
+        _this.cityValue = resp.city;
+        _this.areaValue = resp.district;
+        if (status === "complete" && result.info === "OK") {
           if (result && result.regeocode) {
-            _this.address = result.regeocode.formattedAddress
+            _this.address = result.regeocode.formattedAddress;
             console.log(result.regeocode.addressComponent.district, _this.area);
-            _this.area.forEach(item => {
+            _this.area.forEach((item) => {
               if (item.name === result.regeocode.addressComponent.district) {
                 console.log(item);
-                result.regeocode.addressComponent.district = item.adcode
+                result.regeocode.addressComponent.district = item.adcode;
               }
-            })
+            });
             console.log(result.regeocode.addressComponent.district);
             this.$emit("locationAddress", result.regeocode);
           } else {
             this.$emit("locationFail", "地址查询位置失败,请检查地址是否正确");
           }
         }
-      })
+      });
     },
     //省、市、区改变触发
     provinceE(newVal) {
       this.flag = "province";
-      let city = this.province.filter(item => {
+      let city = this.province.filter((item) => {
         return item.name === newVal;
-      })
+      });
       this.city = city[0].districtList;
-      this.setProvince(newVal)
-      this.cityValue = ''
-      this.areaValue = ''
-      this.address = ''
+      this.setProvince(newVal);
+      this.cityValue = "";
+      this.areaValue = "";
+      this.address = "";
     },
     cityE(newVal) {
       this.flag = "city";
-      let arealist = this.city.filter(item => {
+      let arealist = this.city.filter((item) => {
         return item.name === newVal;
-      })
+      });
       if (arealist[0] !== undefined) {
         this.area = arealist[0].districtList;
-        this.setProvince(newVal)
-        this.areaValue = ''
-        this.address = ''
+        this.setProvince(newVal);
+        this.areaValue = "";
+        this.address = "";
       }
     },
     areaE(newVal) {
       console.log(111);
       this.flag = "district";
-      if (newVal !== '') {
-        this.setProvince(newVal)
-        this.address = ''
+      if (newVal !== "") {
+        this.setProvince(newVal);
+        this.address = "";
       }
     },
     //三級聯動点击动作
     setProvince(value) {
       let adcode;
       let level;
-      if (this.flag === 'province') {
-        this.province.map(item => {
+      if (this.flag === "province") {
+        this.province.map((item) => {
           if (item.name === value) {
-            adcode = item.adcode
-            level = item.level
+            adcode = item.adcode;
+            level = item.level;
           }
-        })
-        this.flag = 'city';
-      } else if (this.flag === 'city') {
-        this.city.map(item => {
+        });
+        this.flag = "city";
+      } else if (this.flag === "city") {
+        this.city.map((item) => {
           if (item.name === value) {
-            adcode = item.adcode
-            level = item.level
+            adcode = item.adcode;
+            level = item.level;
           }
-        })
-        this.flag = 'district';
+        });
+        this.flag = "district";
       } else if (this.flag === "district") {
-        this.area.map(item => {
+        this.area.map((item) => {
           if (item.name === value) {
-            adcode = item.adcode
-            level = item.level
+            adcode = item.adcode;
+            level = item.level;
           }
-        })
+        });
       }
       this.districtSearch.setLevel(level);
-      this.districtSearch.setExtensions('all');
-      let _this = this
+      this.districtSearch.setExtensions("all");
+      let _this = this;
       _this.districtSearch.search(adcode, function (status, result) {
         console.log(result);
         if (result.districtList[0] !== undefined) {
-          _this.map.setCenter([result.districtList[0].center.lng, result.districtList[0].center.lat])
+          _this.map.setCenter([
+            result.districtList[0].center.lng,
+            result.districtList[0].center.lat,
+          ]);
         }
       });
     },
     //远程搜所
     remoteMethod(query) {
       if (query !== "") {
-        let queryValue = this.provinceValue + this.cityValue + this.areaValue + query;
+        let queryValue =
+          this.provinceValue + this.cityValue + this.areaValue + query;
         this.loading = true;
         const _this = this;
         AMap.plugin("AMap.AutoComplete", function () {
@@ -364,9 +406,8 @@ export default {
       }
     },
     //修改时触发
-
   },
-}
+};
 </script>
 
 <style scoped>