Browse Source

地理信息组件更新

duxiangyu 3 years ago
parent
commit
3a51305c18
1 changed files with 56 additions and 38 deletions
  1. 56 38
      src/components/project-manage/components/geo.vue

+ 56 - 38
src/components/project-manage/components/geo.vue

@@ -51,57 +51,72 @@ export default {
       map: null,
       inputVal2: "",
       autocomplete: null,
-      markers: [],
+      markers: [], // 标记数组
 
       geoFormData: {
-        district: "",
-        address: "",
-        lng: "",
-        lat: "",
-        level: null,
+        // 地理信息数据
+        district: "", // 省市区县
+        address: "", // 详细地址
+        lng: "", // 经度
+        lat: "", // 纬度
+        level: null, // 抗震设防烈度
       },
     };
   },
   mounted() {
-    AMapLoader.load({
-      key: window.__systemConf.mapKey,
-      version: "2.0",
-      plugins: [],
-    }).then((Amap) => {
-      this.map = new Amap.Map("map-container", {
-        zoom: 11,
-        resizeEnable: true,
-      });
-      Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
-        const autoOptions = {
-          input: "tipinput",
-        };
-        this.autocomplete = new Amap.Autocomplete(autoOptions);
+    this.initMap();
+  },
+  methods: {
+    // 初始化地图
+    initMap() {
+      AMapLoader.load({
+        key: window.__systemConf.mapKey,
+        version: "2.0",
+        plugins: [],
+      }).then((Amap) => {
+        this.map = new Amap.Map("map-container", {
+          zoom: 11,
+          resizeEnable: true,
+        });
+        Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
+          const autoOptions = {
+            input: "tipinput",
+          };
+          this.autocomplete = new Amap.Autocomplete(autoOptions);
 
-        this.autocomplete.on("select", (e) => {
-          console.log(e);
-          const location = e.poi.location;
-          if (location) {
-            this.setLocation(location);
-            this.addMarker(Amap, location, e.poi.name);
-            const { district, address } = e.poi;
-            this.geoFormData.district = district;
-            this.geoFormData.address = address;
-            this.geoFormData.lng = location.lng.toString();
-            this.geoFormData.lat = location.lat.toString();
-            this.geoFormData.level = null;
-          }
+          this.autocomplete.on("select", (e) => {
+            console.log(e);
+            const location = e.poi.location;
+            if (location) {
+              this.setLocation(location);
+              this.addMarker(Amap, location, e.poi.name);
+              const { district, address } = e.poi;
+              this.geoFormData.district = district;
+              this.geoFormData.address = address;
+              this.geoFormData.lng = location.lng.toString();
+              this.geoFormData.lat = location.lat.toString();
+              this.geoFormData.level = null;
+            }
+          });
         });
       });
-    });
-  },
-  methods: {
-    pressEnter() {},
+    },
+    getDicData() {},
+    /**
+     * 设置当前定位
+     * @param {*} location
+     */
     setLocation(location) {
       if (location) {
         this.map.setCenter([location.lng, location.lat], true);
       }
     },
+    /**
+     * 添加标记点
+     * @param {*} Amap
+     * @param {*} location
+     * @param {*} name 标记点的标签内容
+     */
     addMarker(Amap, location, name) {
       this.clearMarker();
       const marker = new Amap.Marker({
@@ -116,7 +131,10 @@ export default {
       this.markers.push(marker);
       this.map.add(marker);
     },
-    clearMarker(Amap) {
+    /**
+     * 清除地图所有标记点
+     */
+    clearMarker() {
       this.markers.forEach((marker) => this.map.remove(marker));
     },
   },