natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config.ts
View File

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

29
src/web/app/common/mios.ts
View File

@ -1,7 +1,7 @@
import Vue from 'vue';
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 HomeStreamManager from './scripts/streaming/home-stream-manager';
import DriveStreamManager from './scripts/streaming/drive-stream-manager';
@ -170,9 +170,34 @@ export default class MiOS extends EventEmitter {
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).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) {
if (!this.debug) return;

2
src/web/app/config.ts
View File

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

28
src/web/app/desktop/views/components/post-detail.vue
View File

@ -39,14 +39,16 @@
</header>
<div class="body">
<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">
<mk-images :images="p.media"/>
</div>
<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">
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</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>
<footer>
<mk-reactions-viewer :post="p"/>
@ -137,6 +139,21 @@ export default Vue.extend({
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: {
fetchContext() {
@ -308,6 +325,15 @@ export default Vue.extend({
> .body
padding 8px 0
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 300px
> .mk-url-preview
margin-top 8px

20
src/web/app/desktop/views/components/posts.post.vue
View File

@ -49,6 +49,7 @@
<router-link v-for="tag in p.tags" :key="tag" :to="`/search?q=#${tag}`">{{ tag }}</router-link>
</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 class="repost" v-if="p.repost">
<mk-post-preview class="repost" :post="p.repost"/>
</div>
@ -158,6 +159,21 @@ export default Vue.extend({
if ((this as any).os.isSignedIn) {
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() {
this.decapture(true);
@ -447,6 +463,10 @@ export default Vue.extend({
font-size 12px
color #ccc
> .map
width 100%
height 300px
> .tags
margin 4px 0 0 0

28
src/web/app/mobile/views/components/post-detail.vue
View File

@ -42,11 +42,13 @@
<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>
</div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="media" v-if="p.media">
<mk-images :images="p.media"/>
</div>
<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>
<router-link class="time" :to="`/${p.user.username}/${p.id}`">
<mk-time :time="p.created_at" mode="detail"/>
@ -133,6 +135,21 @@ export default Vue.extend({
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: {
fetchContext() {
@ -309,6 +326,15 @@ export default Vue.extend({
> .body
padding 8px 0
> .location
margin 4px 0
font-size 12px
color #ccc
> .map
width 100%
height 200px
> .mk-url-preview
margin-top 8px

20
src/web/app/mobile/views/components/post.vue
View File

@ -49,6 +49,7 @@
</div>
<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>
<span class="app" v-if="p.app">via <b>{{ p.app.name }}</b></span>
<div class="repost" v-if="p.repost">
<mk-post-preview class="repost" :post="p.repost"/>
@ -133,6 +134,21 @@ export default Vue.extend({
if ((this as any).os.isSignedIn) {
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() {
this.decapture(true);
@ -428,6 +444,10 @@ export default Vue.extend({
font-size 12px
color #ccc
> .map
width 100%
height 200px
> .app
font-size 12px
color #ccc

3
webpack/plugins/consts.ts
View File

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