经纬度

operationSupport/src/views/buildingManagement/pageJump/addoredit.vue

@@ -3,7 +3,7 @@
     <div class="device_content">
       <div class="left_content">
         <div class="form_head">
-          <p>基本信息2222</p>
+          <p>基本信息</p>
         </div>
         <div class="form_content">
           <el-scrollbar

operationSupport/src/views/patrolManagement/popups/popMap.vue

@@ -1,127 +1,135 @@
 <template>
-    <div>
-        <el-autocomplete
-            popper-class="my-autocomplete"
-            v-model="addressName"
-            :fetch-suggestions="querySearch"
-            placeholder="请输入地址查找"
-            @select="handleSelect"
-        >
-            <template slot-scope="{ item }">
-                <div class="name">
-                    {{ item.name }} <span>({{ item.cityname + item.adname }})</span>
-                </div>
-            </template>
-        </el-autocomplete>
-        <div :id="`map_uid_${uid}`" class="container"></div>
-    </div>
+  <div>
+    <el-autocomplete
+      popper-class="my-autocomplete"
+      v-model="addressName"
+      :fetch-suggestions="querySearch"
+      placeholder="请输入地址查找"
+      @select="handleSelect"
+    >
+      <template slot-scope="{ item }">
+        <div class="name">
+          {{ item.name }} <span>({{ item.cityname + item.adname }})</span>
+        </div>
+      </template>
+    </el-autocomplete>
+    <div
+      :id="`map_uid_${uid}`"
+      class="container"
+    ></div>
+  </div>
 </template>
 
 <script>
 export default {
-    props: ['params'],
-    data() {
-        let _this = this;
-        return {
-            map: '',
-            placeSearch: '',
-            marker: '',
-            addressName: '', //地址查询名称
-            poisArray: [],
-            thisMapPot: {},
-            uid: _this._uid
-        };
-    },
-    methods: {
-        init() {
-            let _this = this;
-
-            this.map = new AMap.Map(`map_uid_${_this.uid}`, {
-                center: this.params.communityLoc.length == 2 ? this.params.communityLoc : '',
-                resizeEnable: true, //是否监控地图容器尺寸变化
-                zoom: 16 //初始化地图层级
-            });
-            this.map.on('complete', () => {
-                if (!!_this.params.location) {
-                    let arr = this.params.location.split(',');
-                    this.addIcon({ lng: arr[0], lat: arr[1] });
-                }
-            });
+  props: ['params'],
+  data () {
+    let _this = this;
+    return {
+      map: '',
+      placeSearch: '',
+      marker: '',
+      addressName: '', //地址查询名称
+      poisArray: [],
+      thisMapPot: {},
+      uid: _this._uid
+    };
+  },
+  methods: {
+    init () {
+      let _this = this;
 
-            this.map.on('click', this.mapClick);
-            this.placeSearch = new AMap.PlaceSearch({
-                map: _this.map,
-                city: '广东', //020
-                citylimit: true, //定点范围
-                autoFitView: true
-            });
-            AMap.event.addListener(this.placeSearch, 'markerClick', (e) => {
-                this.thisMapPot = e.event.lnglat;
-                this.$message.success('选择成功');
-            });
-        },
-        mapClick(e) {
-            this.addIcon(e.lnglat);
-            this.$message.success('选择成功');
-        },
-        addIcon(e) {
-            if (!!this.marker) {
-                this.map.remove(this.marker);
-                this.marker = '';
-            }
-            this.thisMapPot = e;
-            let loc = [e.lng, e.lat];
-            this.marker = new AMap.Marker({
-                icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
-                position: loc,
-                map: this.map
-            });
-            this.marker.setLabel({
-                offset: new AMap.Pixel(-50, 35),
-                content: !!this.params.data.pointName ? `巡更名称：${this.params.data.pointName}` : `巡更经纬度：${e.lng}，${e.lat}`
-            });
-            this.map.setFitView();
-        },
-        submit() {
-            this.params.callback && this.params.callback(this.thisMapPot);
-            this.$emit('close');
-        },
-        togglePlaceSearch(val, resolve) {
-            this.placeSearch.search(val, (status, result) => {
-                if (result.info == 'OK' && status == 'complete') {
-                    console.log(result.poiList);
-                    this.poisArray = result.poiList.pois;
-                }
-                resolve && resolve(true);
-            });
-        },
-        handleSelect(item) {
-            this.addressName = item.name;
-            this.placeSearch.search(item.name);
-        },
-        querySearch(queryString, cb) {
-            new Promise((resolve) => {
-                this.togglePlaceSearch(queryString, resolve);
-            }).then(() => {
-                if (this.poisArray.length !== 0) {
-                    cb(this.poisArray);
-                }
-            });
+      this.map = new AMap.Map(`map_uid_${_this.uid}`, {
+        center: this.params.communityLoc.length == 2 ? this.params.communityLoc : '',
+        resizeEnable: true, //是否监控地图容器尺寸变化
+        zoom: 16 //初始化地图层级
+      });
+      this.map.on('complete', () => {
+        if (!!_this.params.location) {
+          let arr = this.params.location.split(',');
+          this.addIcon({ lng: arr[0], lat: arr[1] });
         }
+      });
+
+      this.map.on('click', this.mapClick);
+      this.placeSearch = new AMap.PlaceSearch({
+        map: _this.map,
+        city: '广东', //020
+        citylimit: true, //定点范围
+        autoFitView: true
+      });
+      AMap.event.addListener(this.placeSearch, 'markerClick', (e) => {
+        this.thisMapPot = e.event.lnglat;
+        this.$message.success('选择成功');
+      });
+    },
+    mapClick (e) {
+      this.addIcon(e.lnglat);
+      this.$message.success('选择成功');
     },
-    destroyed() {
-        this.map && this.map.destroy();
+    addIcon (e) {
+      if (!!this.marker) {
+        this.map.remove(this.marker);
         this.marker = '';
+      }
+      this.thisMapPot = e;
+      let loc = [e.lng, e.lat];
+      this.marker = new AMap.Marker({
+        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
+        position: loc,
+        map: this.map
+      });
+      this.marker.setLabel({
+        offset: new AMap.Pixel(-50, 35),
+        content: !!this.params.data.pointName ? `巡更名称：${this.params.data.pointName}` : `巡更经纬度：${e.lng}，${e.lat}`
+      });
+      this.map.setFitView();
     },
-    created() {
-        new Promise((resolve) => {
-            if (!!AMap) {
-                resolve(true);
-            }
-        }).then(() => {
-            this.init();
-        });
+    submit () {
+      if (this.thisMapPot.lat == undefined || this.thisMapPot.lng == undefined) {
+        this.$message.error('请在地图上点选地点');
+      } else {
+        this.params.callback && this.params.callback(this.thisMapPot);
+        this.$emit('close');
+      }
+
+    },
+    togglePlaceSearch (val, resolve) {
+      this.placeSearch.search(val, (status, result) => {
+        if (result.info == 'OK' && status == 'complete') {
+          console.log(result.poiList);
+          this.poisArray = result.poiList.pois;
+        }
+        resolve && resolve(true);
+      });
+    },
+    handleSelect (item) {
+      this.addressName = item.name;
+      this.placeSearch.search(item.name);
+    },
+    querySearch (queryString, cb) {
+      new Promise((resolve) => {
+        this.togglePlaceSearch(queryString, resolve);
+      }).then(() => {
+        if (this.poisArray.length !== 0) {
+          cb(this.poisArray);
+        }
+      });
     }
+  },
+  destroyed () {
+    this.map && this.map.destroy();
+    this.marker = '';
+  },
+  created () {
+    new Promise((resolve) => {
+      if (!!AMap) {
+        resolve(true);
+      }
+    }).then(() => {
+      this.init();
+    });
+  }
 };
 </script>
 <style scoped  lang="scss">