地图

src/main/map/src/views/Home.vue

@@ -8,7 +8,6 @@ function getInfo(info) {
     console.log(info);
 }
 window.getInfo = getInfo;
-import { mapState } from 'vuex';
 import Marker from '../utils/Marker';
 import { getStatusInfo } from '../utils/OrderUtils';
 export default {
@@ -16,134 +15,93 @@ export default {
     data() {
         return {
             map: null,
-            orderInfo: null,
-            userLoaction: null,
-            merchantLoaction: null,
+						userMarker:null,
+						merchantMarKer:null,
+						riderMarKer:null,
+						center:null,
+						location:null,
+						merchantLocation:null,
+						riderLocation:null,
         };
     },
-    computed: {
-        ...mapState(['userInfo']),
-        center() {
-            if (
-                this.nowStatus.nowImgType === 'merchant' &&
-                this.merchantLoaction
+    mounted() {
+        window.setLocation=this.setLocation
+    },
+    methods: {
+			setLocation(orderInfo,location,merchantLocation,riderLocation){
+	
+				this.nowStatus=getStatusInfo(orderInfo)
+				this.location=location
+				this.merchantLocation=merchantLocation
+				this.riderLocation=riderLocation
+				
+				if (
+                	this.nowStatus.nowImgType === 'merchant' &&
+                merchantLocation
             ) {
-                return this.merchantLoaction;
+                this.center= merchantLocation
             } else if (
-                this.nowStatus.nowImgType === 'user' &&
-                this.userLoaction
+                	this.nowStatus.nowImgType === 'rider' &&
+               riderLocation
             ) {
-                return this.userLoaction;
+                 this.center= riderLocation
             } else {
-                return { lat: 40.02906301748584, lng: 116.25499991104516 };
+								 this.center= location
             }
-        },
-        userMarker() {
-            if (this.map && this.userLoaction) {
-                return new Marker({
+
+        this.$nextTick(() => {
+					this.initMap();
+        });
+			},
+        initMap() {
+            // 初始化地图
+           if(!this.map){
+						  this.map = new TMap.Map('container', {
+                zoom: 15, // 设置地图缩放级别
+                center: new TMap.LatLng(this.center.lat, this.center.lng), // 设置地图中心点坐标
+                doubleClickZoom: false,
+            });
+					 }
+					 else{
+						 		this.map.setCenter(new TMap.LatLng(this.center.lat, this.center.lng))
+				 }
+
+				 if(!	this.userMarker){
+					 this.userMarker.setMap(null)
+				 }
+            		this.userMarker=new Marker({
                     map: this.map,
                     position: new TMap.LatLng(
-                        this.userLoaction.lat,
-                        this.userLoaction.lng,
+                        this.location.lat,
+                        this.location.lng,
                     ),
                     type: 'user',
                     nowStatus: this.nowStatus,
-                });
-            }
-            return null;
-        },
-        merchantMarKer() {
-            if (this.map && this.merchantLoaction) {
-                return new Marker({
+								})
+									 if(!	this.merchantMarKer){
+					 this.merchantMarKer.setMap(null)
+				 }
+								this.merchantMarKer=new Marker({
                     map: this.map,
                     position: new TMap.LatLng(
-                        this.merchantLoaction.lat,
-                        this.merchantLoaction.lng,
+                        this.merchantLocation.lat,
+                        this.merchantLocation.lng,
                     ),
                     type: 'merchant',
                     nowStatus: this.nowStatus,
-                });
-            }
-            return null;
-        },
-        nowStatus() {
-            if (this.$route.query) {
-                return getStatusInfo(this.$route.query);
-            } else {
-                return null;
-            }
-        },
-    },
-    watch: {
-        '$route.query'() {
-            if (this.$route.query.location) {
-                this.userLoaction = {
-                    lat: this.$route.query.location.split(',')[1],
-                    lng: this.$route.query.location.split(',')[0],
-                };
-            }
-            if (this.$route.query.merchantLocation) {
-                this.merchantLoaction = {
-                    lat: this.$route.query.merchantLocation.split(',')[1],
-                    lng: this.$route.query.merchantLocation.split(',')[0],
-                };
-            }
-
-            this.$nextTick(() => {
-                setTimeout(() => {
-                    this.initMap();
-                }, 1000);
-            });
-        },
-    },
-    mounted() {
-        if (this.$route.query.location) {
-            this.userLoaction = {
-                lat: this.$route.query.location.split(',')[1],
-                lng: this.$route.query.location.split(',')[0],
-            };
-        }
-        if (this.$route.query.merchantLocation) {
-            this.merchantLoaction = {
-                lat: this.$route.query.merchantLocation.split(',')[1],
-                lng: this.$route.query.merchantLocation.split(',')[0],
-            };
-        }
-
-        this.$nextTick(() => {
-            setTimeout(() => {
-                this.initMap();
-            }, 1000);
-        });
-    },
-    methods: {
-        initMap() {
-            // 初始化地图
-            this.map = new TMap.Map('container', {
-                zoom: 15, // 设置地图缩放级别
-                center: new TMap.LatLng(this.center.lat, this.center.lng), // 设置地图中心点坐标
-                doubleClickZoom: false,
-            });
-            let donutList = [
-                this.userMarker,
-                this.merchantMarKer,
-                new Marker({
+								});
+									 if(!	this.riderMarKer){
+					 this.riderMarKer.setMap(null)
+				 }
+								this.riderMarKer= new Marker({
                     map: this.map,
                     position: new TMap.LatLng(
-                        40.02906301748584,
-                        116.25499991104516,
+                      this.riderLocation.lat,
+                      this.riderLocation.lng,
                     ),
                     type: 'rider',
                     nowStatus: this.nowStatus,
-                }),
-            ];
-            donutList.forEach((donut, index) => {
-                donut.on('click', () => {
-                    console.log(
-                        `第${index}个环形图被点击，位置为${donut.position}`,
-                    );
-                });
-            });
+								})
         },
     },
 };