|
|
@@ -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 () {
|