Add store option for set on GoogleMap (1361844a) · Commits · school / Capstone Design / 02 / Vue Router

package-lock.json

+13 −1

Original line number	Diff line number	Diff line
		@@ -12,7 +12,8 @@
		"core-js": "^3.8.3",
		"vue": "^3.3.7",
		"vue-router": "^4.2.5",
		"vue3-google-map": "^0.18.0"
		"vue3-google-map": "^0.18.0",
		"vuex": "^4.0.2"
		},
		"devDependencies": {
		"@babel/core": "^7.12.16",
		@@ -11109,6 +11110,17 @@
		"vue": "^3"
		}
		},
		"node_modules/vuex": {
		"version": "4.0.2",
		"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
		"integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
		"dependencies": {
		"@vue/devtools-api": "^6.0.0-beta.11"
		},
		"peerDependencies": {
		"vue": "^3.0.2"
		}
		},
		"node_modules/watchpack": {
		"version": "2.4.0",
		"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

+2 −1

Original line number	Diff line number	Diff line
		@@ -12,7 +12,8 @@
		"core-js": "^3.8.3",
		"vue": "^3.3.7",
		"vue-router": "^4.2.5",
		"vue3-google-map": "^0.18.0"
		"vue3-google-map": "^0.18.0",
		"vuex": "^4.0.2"
		},
		"devDependencies": {
		"@babel/core": "^7.12.16",

src/components/GMap.vue

+87 −24

Original line number	Diff line number	Diff line
		<template>
		<div style="width: 90%; height: 90%">
		<button @click="showMapMethod();">Show Map</button>
		<!-- <button @click="showMapMethod();">Show Map</button> -->
		<GoogleMap
		v-if="showMap"
		api-key="AIzaSyDGn4q3xBEYl9Hqvn6Beqjk4yZSVGrL1bE"
		:center="center"
		:zoom="3"
		:zoom="19"
		style="width: 100%; height: 90%"
		>
		<Polyline :options="flightPath" />
		@@ -18,26 +18,71 @@

		<script>
		import { defineComponent } from "vue";
		// import { useStore } from 'vuex';
		import { GoogleMap, Polyline, Circle, Marker } from "vue3-google-map";


		// import axios from 'axios';

		let result
		result =
		// let result
		// result =
		// {
		// "crossing_point": [
		// { lat: 1.5745, lng: 190.326 }
		// ],
		// "route1": [
		// { "lat": 37.772, "lng": -122.214 },
		// { "lat": 21.291, "lng": -157.821 },
		// { "lat": -18.142, "lng": 178.431 },
		// { "lat": -27.467, "lng": 153.027 }
		// ],
		// "route2": [
		// { "lat": 37.772, "lng": 153.027 },
		// { "lat": 21.291, "lng": 178.431 },
		// { "lat": -18.142, "lng": -157.821 },
		// { "lat": -27.467, "lng": -122.214 }
		// ]
		// }

		let result =
		{
		"data1": [
		{
		"crossing_point": [
		{ lat: 1.5745, lng: 190.326 }
		{
		"lat": 37.2239683,
		"lng": 127.1818492
		}
		],
		"route1": [
		{ "lat": 37.772, "lng": -122.214 },
		{ "lat": 21.291, "lng": -157.821 },
		{ "lat": -18.142, "lng": 178.431 },
		{ "lat": -27.467, "lng": 153.027 }
		{
		"lat": 37.2239683,
		"lng": 127.1818492
		},
		{
		"lat": 37.2239683,
		"lng": 127.1818492
		}
		],
		"route2": [
		{ "lat": 37.772, "lng": 153.027 },
		{ "lat": 21.291, "lng": 178.431 },
		{ "lat": -18.142, "lng": -157.821 },
		{ "lat": -27.467, "lng": -122.214 }
		{
		"lat": 37.6718673,
		"lng": 126.7373022
		},
		{
		"lat": 37.2368425,
		"lng": 127.1863072
		},
		{
		"lat": 37.2239683,
		"lng": 127.1818492
		},
		{
		"lat": 37.2239683,
		"lng": 127.1818492
		}
		]
		}
		]
		}

		@@ -48,10 +93,16 @@ export default defineComponent({

		data() {
		return {
		showMap: false,
		showMap: true,
		};
		},

		// created() {
		// // Retrieve the data from Vuex
		// this.result = this.$store.state.data.data1;
		// // console.log(result);
		// },

		methods: {
		showMapMethod() {
		this.showMap = true;
		@@ -60,15 +111,27 @@ export default defineComponent({

		setup() {

		// const store = useStore();
		// const result = JSON.parse(JSON.stringify(store.state.data.data1))[0];

		// console.log(result);
		const center = result.crossing_point[0];
		// console.log(JSON.parse(JSON.stringify(result)))
		// console.log(result.crossing_point[0]);

		// console.log(result.data1[0])
		result = result.data1[0];

		let center = result.crossing_point[0];
		console.log(center);

		let flightPlanCoordinates = result.route1;
		let flightPlanCoordinates2 = result.route2;
		console.log(flightPlanCoordinates);
		console.log(flightPlanCoordinates2);

		const circle = {
		center: center,
		radius: Math.sqrt(8405837) * 1000,
		radius: 50,
		strokeColor: "#FF00FF",
		strokeOpacity: 0.8,
		strokeWeight: 2,
		@@ -82,14 +145,14 @@ export default defineComponent({
		path: flightPlanCoordinates,
		geodesic: true,
		strokeColor: "#FF0000",
		strokeOpacity: 1.0,
		strokeWeight: 2,
		strokeOpacity: 0.8,
		strokeWeight: 5,
		};
		const flightPath2 = {
		path: flightPlanCoordinates2,
		geodesic: true,
		strokeColor: "#0000ff",
		strokeOpacity: 1.0,
		strokeOpacity: 0.8,
		strokeWeight: 2,
		};
		return { center, flightPath, flightPath2, circle, markerOptions };

src/components/LastEnd.vue

+5 −1

Original line number	Diff line number	Diff line
		@@ -54,7 +54,11 @@ export default {
		.then(response => {
		//console.log(response);
		let result = response.data
		console.log(result);
		// console.log(result);

		this.$store.commit('setData', result);
		this.$router.push({ name: 'GMap' });

		// Do something with the response data
		// window.location.href = `#/result?lat=${lat}&lng=${lng}`;

src/main.js

+2 −0

Original line number	Diff line number	Diff line
		import { createApp } from 'vue'
		import { router } from './router'; // 라우터 추가하고
		import App from './App.vue'
		import store from './store';

		// Create Vue Instance
		const app = createApp(App);

		app.use(router); // 사용 설정 하기
		app.use(store);

		app.mount('#app');
		No newline at end of file