Show google maps when geo location attached

This commit is contained in:
syuilo 2018-03-05 13:40:21 +09:00
parent 0b50340a35
commit 47c1139a49
8 changed files with 128 additions and 6 deletions

View File

@ -89,6 +89,8 @@ type Source = {
public_key: string; public_key: string;
private_key: string; private_key: string;
}; };
google_maps_api_key: string;
}; };
/** /**

View File

@ -1,7 +1,7 @@
import Vue from 'vue'; import Vue from 'vue';
import { EventEmitter } from 'eventemitter3'; import { EventEmitter } from 'eventemitter3';
import { host, apiUrl, swPublickey, version, lang } from '../config'; import { host, apiUrl, swPublickey, version, lang, googleMapsApiKey } from '../config';
import Progress from './scripts/loading'; import Progress from './scripts/loading';
import HomeStreamManager from './scripts/streaming/home-stream-manager'; import HomeStreamManager from './scripts/streaming/home-stream-manager';
import DriveStreamManager from './scripts/streaming/drive-stream-manager'; import DriveStreamManager from './scripts/streaming/drive-stream-manager';
@ -170,8 +170,33 @@ export default class MiOS extends EventEmitter {
this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i); this.streams.messagingIndexStream = new MessagingIndexStreamManager(this.i);
}); });
// TODO: this global export is for debugging. so disable this if production build //#region load google maps api
(window as any).os = this; (window as any).initGoogleMaps = () => {
this.emit('init-google-maps');
};
const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script');
script.setAttribute('src', `https://maps.googleapis.com/maps/api/js?key=${googleMapsApiKey}&callback=initGoogleMaps`);
script.setAttribute('async', 'true');
script.setAttribute('defer', 'true');
head.appendChild(script);
//#endregion
if (this.debug) {
(window as any).os = this;
}
}
public getGoogleMaps() {
return new Promise((res, rej) => {
if ((window as any).google && (window as any).google.maps) {
res((window as any).google.maps);
} else {
this.once('init-google-maps', () => {
res((window as any).google.maps);
});
}
});
} }
public log(...args) { public log(...args) {

View File

@ -13,6 +13,7 @@ declare const _THEME_COLOR_: string;
declare const _COPYRIGHT_: string; declare const _COPYRIGHT_: string;
declare const _VERSION_: string; declare const _VERSION_: string;
declare const _LICENSE_: string; declare const _LICENSE_: string;
declare const _GOOGLE_MAPS_API_KEY_: string;
export const host = _HOST_; export const host = _HOST_;
export const url = _URL_; export const url = _URL_;
@ -29,3 +30,4 @@ export const themeColor = _THEME_COLOR_;
export const copyright = _COPYRIGHT_; export const copyright = _COPYRIGHT_;
export const version = _VERSION_; export const version = _VERSION_;
export const license = _LICENSE_; export const license = _LICENSE_;
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;

View File

@ -39,14 +39,16 @@
</header> </header>
<div class="body"> <div class="body">
<mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/> <mk-post-html :class="$style.text" v-if="p.ast" :ast="p.ast" :i="os.i"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-images :images="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p"/> <mk-poll v-if="p.poll" :post="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div> </div>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
</div> </div>
<footer> <footer>
<mk-reactions-viewer :post="p"/> <mk-reactions-viewer :post="p"/>
@ -137,6 +139,21 @@ export default Vue.extend({
this.replies = replies; this.replies = replies;
}); });
} }
// Draw map
if (this.p.geo) {
(this as any).os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.p.geo.latitude, this.p.geo.longitude);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}, },
methods: { methods: {
fetchContext() { fetchContext() {
@ -308,6 +325,15 @@ export default Vue.extend({
> .body > .body
padding 8px 0 padding 8px 0
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 300px
> .mk-url-preview > .mk-url-preview
margin-top 8px margin-top 8px

View File

@ -49,6 +49,7 @@
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div> </div>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a> <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="repost" v-if="p.repost"> <div class="repost" v-if="p.repost">
<mk-post-preview class="repost" :post="p.repost"/> <mk-post-preview class="repost" :post="p.repost"/>
</div> </div>
@ -158,6 +159,21 @@ export default Vue.extend({
if ((this as any).os.isSignedIn) { if ((this as any).os.isSignedIn) {
this.connection.on('_connected_', this.onStreamConnected); this.connection.on('_connected_', this.onStreamConnected);
} }
// Draw map
if (this.p.geo) {
(this as any).os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.p.geo.latitude, this.p.geo.longitude);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}, },
beforeDestroy() { beforeDestroy() {
this.decapture(true); this.decapture(true);
@ -447,6 +463,10 @@ export default Vue.extend({
font-size 12px font-size 12px
color #ccc color #ccc
> .map
width 100%
height 300px
> .tags > .tags
margin 4px 0 0 0 margin 4px 0 0 0

View File

@ -42,11 +42,13 @@
<div class="tags" v-if="p.tags && p.tags.length > 0"> <div class="tags" v-if="p.tags && p.tags.length > 0">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link> <router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</div> </div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="media" v-if="p.media"> <div class="media" v-if="p.media">
<mk-images :images="p.media"/> <mk-images :images="p.media"/>
</div> </div>
<mk-poll v-if="p.poll" :post="p"/> <mk-poll v-if="p.poll" :post="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
</div> </div>
<router-link class="time" :to="`/${p.user.username}/${p.id}`"> <router-link class="time" :to="`/${p.user.username}/${p.id}`">
<mk-time :time="p.created_at" mode="detail"/> <mk-time :time="p.created_at" mode="detail"/>
@ -133,6 +135,21 @@ export default Vue.extend({
this.replies = replies; this.replies = replies;
}); });
} }
// Draw map
if (this.p.geo) {
(this as any).os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.p.geo.latitude, this.p.geo.longitude);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}, },
methods: { methods: {
fetchContext() { fetchContext() {
@ -309,6 +326,15 @@ export default Vue.extend({
> .body > .body
padding 8px 0 padding 8px 0
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 200px
> .mk-url-preview > .mk-url-preview
margin-top 8px margin-top 8px

View File

@ -49,6 +49,7 @@
</div> </div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/> <mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a> <a class="location" v-if="p.geo" :href="`http://maps.google.com/maps?q=${p.geo.latitude},${p.geo.longitude}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="map" v-if="p.geo" ref="map"></div>
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span> <span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
<div class="repost" v-if="p.repost"> <div class="repost" v-if="p.repost">
<mk-post-preview class="repost" :post="p.repost"/> <mk-post-preview class="repost" :post="p.repost"/>
@ -133,6 +134,21 @@ export default Vue.extend({
if ((this as any).os.isSignedIn) { if ((this as any).os.isSignedIn) {
this.connection.on('_connected_', this.onStreamConnected); this.connection.on('_connected_', this.onStreamConnected);
} }
// Draw map
if (this.p.geo) {
(this as any).os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.p.geo.latitude, this.p.geo.longitude);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}, },
beforeDestroy() { beforeDestroy() {
this.decapture(true); this.decapture(true);
@ -428,6 +444,10 @@ export default Vue.extend({
font-size 12px font-size 12px
color #ccc color #ccc
> .map
width 100%
height 200px
> .app > .app
font-size 12px font-size 12px
color #ccc color #ccc

View File

@ -27,7 +27,8 @@ export default lang => {
_LANG_: lang, _LANG_: lang,
_HOST_: config.host, _HOST_: config.host,
_URL_: config.url, _URL_: config.url,
_LICENSE_: licenseHtml _LICENSE_: licenseHtml,
_GOOGLE_MAPS_API_KEY_: config.google_maps_api_key
}; };
const _consts = {}; const _consts = {};