forked from GuillaumeLeclerc/vue-google-maps
/
streetViewPanoramaImpl.js
125 lines (109 loc) · 2.8 KB
/
streetViewPanoramaImpl.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import _ from 'lodash';
import {loaded} from '../manager.js';
import {DeferredReadyMixin} from '../utils/deferredReady.js';
import eventsBinder from '../utils/eventsBinder.js';
import propsBinder from '../utils/propsBinder.js';
import {DeferredReady} from '../utils/deferredReady.js'
import getPropsMixin from '../utils/getPropsValuesMixin.js'
import latlngChangedHandler from '../utils/latlngChangedHandler.js';
const props = {
zoom: {
twoWay: true,
type: Number
},
pov: {
twoWay: true,
type: Object,
trackProperties: ['pitch', 'heading']
},
position: {
twoWay: true,
type: Object,
},
pano: {
twoWay: true,
type: String
},
motionTracking: {
twoWay: false,
type: Boolean
},
visible: {
twoWay: false,
type: Boolean,
default: true,
},
options: {
twoWay: false,
type: Object,
default () {return {}}
}
};
const events = [
'closeclick',
'status_changed',
];
// Other convenience methods exposed by Vue Google Maps
const customMethods = {
resize() {
if (this.$panoObject) {
google.maps.event.trigger(this.$panoObject, 'resize');
}
},
};
// Methods is a combination of customMethods and linkedMethods
const methods = _.assign({}, customMethods);
export default {
mixins: [getPropsMixin, DeferredReadyMixin],
props: props,
replace: false, // necessary for css styles
methods,
created() {
this.$panoCreated = new Promise((resolve, reject) => {
this.$panoCreatedDeferred = {resolve, reject}
});
},
data() {
return {
_changeIndicators: {} // For propsBinder trackProperties
}
},
watch: {
position: {
deep: true,
handler: latlngChangedHandler((val, oldVal) => {
if (this.$panoObject) {
this.$panoObject.setCenter(val);
}
}),
},
zoom(zoom) {
if (this.$panoObject) {
this.$panoObject.setZoom(zoom);
}
}
},
deferredReady() {
return loaded.then(() => {
// getting the DOM element where to create the map
const element = this.$refs['vue-street-view-pano'];
// creating the map
const options = _.defaults({},
_.omit(this.getPropsValues(), ['options']),
this.options
);
console.log(options);
this.$panoObject = new google.maps.StreetViewPanorama(element, options);
// binding properties (two and one way)
propsBinder(this, this.$panoObject,
_.omit(props, ['position', 'zoom']));
//binding events
eventsBinder(this, this.$panoObject, events);
this.$panoCreatedDeferred.resolve(this.$panoObject);
return this.$panoCreated;
})
.catch((error) => {
throw error;
});
},
}