地图问题

operationSupport/src/components/mapPopup/index.vue

@@ -13,20 +13,21 @@
                 </div>
             </template>
         </el-autocomplete>
-        <div id="container"></div>
+        <div :id="`map_uid_${uid}`" class="containers"></div>
     </div>
 </template>
 
 <script>
-import { mapAddress } from './index';
 export default {
     data() {
+        let _this = this;
         return {
             map: '',
             placeSearch: '',
             marker: '',
             addressName: '', //地址查询名称
             poisArray: [],
+            uid: _this._uid
         };
     },
     props: {
@@ -39,11 +40,10 @@ export default {
     methods: {
         init() {
             let _this = this;
-            _this.map = new AMap.Map('container', {
+            _this.map = new AMap.Map(`map_uid_${_this.uid}`, {
                 resizeEnable: true, //是否监控地图容器尺寸变化
                 zoom: 11 //初始化地图层级
             });
-            // _this.map.on('click', _this.mapClick);
             _this.placeSearch = new AMap.PlaceSearch({
                 map: _this.map
             });
@@ -58,7 +58,7 @@ export default {
                 position: loc
             });
             this.map.add(this.marker);
-            this.$emit('getDot',e)
+            this.$emit('getDot', e);
         },
         togglePlaceSearch(val, resolve) {
             this.placeSearch.search(val, (status, result) => {
@@ -70,7 +70,6 @@ export default {
         },
         handleSelect(item) {
             this.mapClick(item);
-            // this.$emit('getDot', item);
         },
         querySearch(queryString, cb) {
             new Promise((resolve) => {
@@ -82,6 +81,10 @@ export default {
             });
         }
     },
+    destroyed() {
+        this.map && this.map.destroy();
+        this.marker = '';
+    },
     created() {
         new Promise((resolve) => {
             if (!!AMap) {
@@ -95,7 +98,7 @@ export default {
 </script>
 <style scoped  lang="scss">
 /* --------------------------------高德地图样式----------------------------- */
-#container {
+.containers {
     margin-top: 20px;
     width: 100%;
     height: 400px;

operationSupport/src/views/communityManagement/pageJump/AddOrEdit.vue

@@ -191,12 +191,6 @@ export default {
             this.ruleForm.cityId = va[1];
             this.ruleForm.regionId = _.last(va);
         },
-        // productChange2(va) {
-        //     this.ruleForm.companyOrgId = _.last(va);
-        // },
-        // productChange3(va) {
-        //     this.ruleForm.deptOrgId = _.last(va);
-        // },
         getDot(item) {
             this.ruleForm.address = item.cityname + item.adname + item.address;
             this.ruleForm.latitude = item.location.lat;
@@ -281,7 +275,6 @@ export default {
     },
     created() {
         this.regionalQuery();
-
         if (!!this.params.id) {
             this.getDetails(this.params.id);
         }

operationSupport/src/views/ownerManagement/index.vue

@@ -118,11 +118,10 @@ import list from '@/js/list.js';
 // import addOwner from './stepPage/add.vue';
 import addOwner from './stepPage/newAdd.vue';
 
-import Index from '../../components/mapPopup/index.vue';
 export default {
     mixins: [list],
     name: 'ownerManagement',
-    components: { addOwner, Index },
+    components: { addOwner },
     data() {
         return {
             ownerStatus: '',

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

@@ -26,12 +26,8 @@
     </div>
 </template>
 <script >
-import MapPopup from '@/components/mapPopup/index.vue';
 export default {
     props: ['params'],
-    components: {
-        MapPopup
-    },
     data() {
         const _this = this;
         return {

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

@@ -13,7 +13,7 @@
                 </div>
             </template>
         </el-autocomplete>
-        <div id="container"></div>
+        <div :id="`map_uid_${uid}`" class="container"></div>
     </div>
 </template>
 
@@ -21,20 +21,22 @@
 export default {
     props: ['params'],
     data() {
+        let _this = this;
         return {
             map: '',
             placeSearch: '',
             marker: '',
             addressName: '', //地址查询名称
             poisArray: [],
-            thisMapPot: {}
+            thisMapPot: {},
+            uid: _this._uid
         };
     },
     methods: {
         init() {
             let _this = this;
 
-            this.map = new AMap.Map('container', {
+            this.map = new AMap.Map(`map_uid_${_this.uid}`, {
                 center: this.params.communityLoc.length == 2 ? this.params.communityLoc : '',
                 resizeEnable: true, //是否监控地图容器尺寸变化
                 zoom: 16 //初始化地图层级
@@ -112,7 +114,11 @@ export default {
         this.marker = '';
     },
     created() {
-        this.$nextTick(() => {
+        new Promise((resolve) => {
+            if (!!AMap) {
+                resolve(true);
+            }
+        }).then(() => {
             this.init();
         });
     }
@@ -120,7 +126,7 @@ export default {
 </script>
 <style scoped  lang="scss">
 /* --------------------------------高德地图样式----------------------------- */
-#container {
+.container {
     margin-top: 20px;
     width: 100%;
     height: 400px;