Преглед на файлове

bad directions implemented need to fix gmaps api

Jared Norris преди 8 години
родител
ревизия
1f8c0c4e32
променени са 3 файла, в които са добавени 26 реда и са изтрити 5 реда
  1. 1
    0
      VueApp/index.html
  2. 22
    4
      VueApp/src/components/GoogleMap.vue
  3. 3
    1
      VueApp/src/main.js

+ 1
- 0
VueApp/index.html Целия файл

@@ -6,5 +6,6 @@
6 6
   </head>
7 7
   <body>
8 8
     <div id="app"></div>
9
+    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
9 10
   </body>
10 11
 </html>

+ 22
- 4
VueApp/src/components/GoogleMap.vue Целия файл

@@ -30,7 +30,6 @@
30 30
 </template>
31 31
 
32 32
 <script>
33
-  import { gmapApi } from 'vue2-google-maps'
34 33
   export default {
35 34
     name: 'GoogleMap',
36 35
     data () {
@@ -41,9 +40,7 @@
41 40
         currentPlace: null
42 41
       }
43 42
     },
44
-    computed: {
45
-      google: gmapApi
46
-    },
43
+    created () { console.log(google) }, // eslint-disable-line no-undef
47 44
     methods: {
48 45
       setPlace (place) {
49 46
         this.currentPlace = place
@@ -67,10 +64,31 @@
67 64
         }
68 65
         if (this.markers.indexOf(marker) === -1) {
69 66
           this.markers.push({ position: marker })
67
+          if (this.markers.length === 2) {
68
+            this.getRoute(this.markers[0], this.markers[1])
69
+          }
70 70
         }
71 71
       },
72 72
       removeMarker (marker) {
73 73
         this.markers = this.markers.filter(e => (marker.latLng.lat() !== e.position.lat) && (marker.latLng.lng() !== e.position.lng))
74
+      },
75
+      getRoute: function (a, b) {
76
+        console.log(a, b)
77
+        this.directionsService = new google.maps.DirectionsService() // eslint-disable-line no-undef
78
+        this.directionsDisplay = new google.maps.DirectionsRenderer() // eslint-disable-line no-undef
79
+        this.directionsDisplay.setMap(this.$refs.gMap.$mapObject)
80
+        let vm = this
81
+        vm.directionsService.route({
82
+          origin: a.position,
83
+          destination: b.position,
84
+          travelMode: 'DRIVING'
85
+        }, function (response, status) {
86
+          if (status === 'OK') {
87
+            vm.directionsDisplay.setDirections(response)
88
+          } else {
89
+            console.log('Directions request failed due to ' + status)
90
+          }
91
+        })
74 92
       }
75 93
     },
76 94
     mounted () {

+ 3
- 1
VueApp/src/main.js Целия файл

@@ -7,9 +7,11 @@ import router from './router'
7 7
 
8 8
 Vue.config.productionTip = false
9 9
 
10
+let apiKey = 'AIzaSyDq8NHbKHAd2HE3SCtIpxq8yYVD16PzUlY'
11
+
10 12
 Vue.use(VueGoogleMaps, {
11 13
   load: {
12
-    key: 'AIzaSyDq8NHbKHAd2HE3SCtIpxq8yYVD16PzUlY',
14
+    key: apiKey,
13 15
     libraries: 'places'
14 16
   }
15 17
 })