forked from GuillaumeLeclerc/vue-google-maps
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
283 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <head> | ||
| <style> | ||
| .pano { | ||
| width: 500px; | ||
| height: 300px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="root"> | ||
| <h1>Panorama at Pembroke College, Cambridge, facing North, looking slightly upwards (10 degrees)</h1> | ||
| Point-of-view updates when you pan around | ||
|
|
||
| <gmap-street-view-panorama | ||
| class="pano" | ||
| :position="{lat: 52.201272, lng: 0.118720}" | ||
| :pov="{heading: 0, pitch: 10}" | ||
| :zoom="1" | ||
| @pano_changed="updatePano" | ||
| @pov_changed="updatePov"> | ||
| </gmap-street-view-panorama> | ||
| <ul> | ||
| <li>Heading: {{pov && pov.heading}}</li> | ||
| <li>Pitch: {{pov && pov.pitch}}</li> | ||
| <li>Pano ID: {{pano}}</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script> | ||
| <script src="vue-google-maps.js"></script> | ||
|
|
||
| <script> | ||
|
|
||
| Vue.use(VueGoogleMap, { | ||
| load: { | ||
| key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw', | ||
| libraries: 'places' | ||
| }, | ||
| // Demonstrating how we can customize the name of the components | ||
| installComponents: true, | ||
| }); | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function() { | ||
| new Vue({ | ||
| el: '#root', | ||
| data: { | ||
| pov: null, | ||
| pano: null, | ||
| }, | ||
| methods: { | ||
| updatePov(pov) { | ||
| this.pov = pov; | ||
| }, | ||
| updatePano(pano) { | ||
| this.pano = pano; | ||
| } | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| </script> | ||
|
|
||
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <template> | ||
| <div class="vue-street-view-pano-container"> | ||
| <div ref="vue-street-view-pano" class="vue-street-view-pano"></div> | ||
| <slot></slot> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script src="./streetViewPanoramaImpl.js"> | ||
| </script> | ||
|
|
||
| <style lang="css"> | ||
| .vue-street-view-pano-container { | ||
| position: relative; | ||
| } | ||
| .vue-street-view-pano-container .vue-street-view-pano { | ||
| left: 0; right: 0; top: 0; bottom: 0; | ||
| position: absolute; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,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; | ||
| }); | ||
| }, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| // Observed bug with Vue 2.1.6 under certain circumstances: | ||
| // If you pass an object constant into :center, the deep watch | ||
| // is still triggered | ||
| function isChanged(prop, val, oldVal) { | ||
| var oldProp = (typeof oldVal[prop] === 'number') ? oldVal[prop] : | ||
| (typeof oldVal[prop] === 'function') ? oldVal[prop].apply(oldVal) : | ||
| oldVal[prop]; // don't know how to handle | ||
| var newProp = (typeof val[prop] === 'number') ? val[prop] : | ||
| (typeof val[prop] === 'function') ? val[prop].apply(val) : | ||
| val[prop]; // don't know how to handle | ||
| return oldProp !== newProp; | ||
| } | ||
|
|
||
| export default function handler(action) { | ||
| return (val, oldVal) => { | ||
| // Check if the value has really changed | ||
| if (isChanged('lat', val, oldVal) || isChanged('lng', val, oldVal)) { | ||
| action(val, oldVal); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters