Vue.js + Firebase 動手做
by Kevin Liao
tags: talk
我是誰
- Kevin Liao （廖偉丞）
- 好想工作室
- Front-End +++++++
Hackpad
大家可能有過這種經驗
- 路痴朋友迷路了
- 跟朋友雞同鴨講
- 發現自己也是路癡
Taken
首先你需要有
- node.js
- chrome with vue-devtools
- vue-cli
- firebase-tools
npm install -g vue-cli firebase-tools
建立專案
- 建立 Vue 專案
vue init webpack-simple vue-taken
cd vue-taken
npm install
npm run dev
加入定位功能
Geolocation
example:
navigator.geolocation.watchPosition((position) => {
do_something(
position.coords.latitude,
position.coords.longitude
)
})
- via MDN
在 script 中加入：
<script>
// ...
data () {
return {
position: {
lat: 0,
lng: 0
}
}
},
ready () {
navigator.geolocation.watchPosition((position) => {
this.position.lat = position.coords.latitude
this.position.lng = position.coords.longitude
}
})
}
在 template 中加入：
<h3>我的位置：{{ position.lat }}, {{ position.lng }}</h3>
script：
import { Map, Marker, load } from 'vue-google-maps'
load('你的API Key')
export default {
//...
components: {
Map, Marker
},
//...
data () {
return {
//...
center: { lat: 0, lng: 0 },
}
},
//...
}
//...
template：
<map
:center.sync="center"
:map-type-id.sync="terrian"
:zoom.sync="18"
>
<marker
:position.sync="position"
></marker>
</map>
style：
<style>
body {
margin: 0px;
padding: 0px;
}
map {
width: 100%;
height: 450px;
display: block;
}
將畫面置中
template：
<button @click="setCenter()">
我的位置：{{ position.lat }}, {{ position.lng }}
</button>
script：
methods: {
setCenter (m) {
if (m) {
this.center = m.position
} else {
this.center = this.position
}
}
}
Firebase SDK
- 先到 Firebase Console 取得 API Key
- 加入：
<script>
import firebase from 'firebase'
const config = {
apiKey: "AIzaSyBViACd0PRoj3M33fMxpVs7PegSdSz3ofg",
authDomain: "fire-geo-bdc76.firebaseapp.com",
databaseURL: "https://fire-geo-bdc76.firebaseio.com",
storageBucket: "fire-geo-bdc76.appspot.com",
};
load('你的Google Map API Key')
firebase.initializeApp(config);
識別不同使用者 & 地圖
script：
// ...
data () {
return {
// ...
mapId: '',
userId: '',
markers: []
}
},
ready () {
this.mapId = location.hash.slice(1)
if (this.mapId === '') {
this.mapId = firebase.database().ref('/maps/').push().key
location.hash = this.mapId
}
this.userId = localStorage.getItem('vue-taken-userId')
if (!this.userId) {
this.userId = firebase.database().ref('/maps/' + this.mapId).push().key
localStorage.setItem('vue-taken-userId', this.userId)
}
// ...
// ...
ref.on('child_added', (data) => {
this.markers.push({
key: data.key,
position: data.val().position
})
})
ref.on('child_changed', (data) => {
let marker = this.markers.find((m) => m.key === data.key)
marker.position = data.val().position
})
// ...
列出所有 marker
template：
<button @click="toggleMenu()">座標列表</button>
<ul :class="{ 'menu': hideMenu }">
<li v-for="m in markers">
<b v-if="m.key === userId">4ni </b>
<a @click="setCenter(m)">
{{ m.key }}
</a>
</li>
</ul>
<map
:center.sync="center"
:map-type-id.sync="terrian"
:zoom.sync="18"
>
<marker
v-for="m in markers"
:position.sync="m.position"
></marker>
</map>
script：
data () {
return {
// ...
hideMenu: true
}
},
//...
methods: {
// ...
toggleMenu () {
this.hideMenu = !this.hideMenu
}
}
style：
.menu {
display: none;
}
a {
cursor: pointer;
text-decoration: underline;
}
Deploy 到 Firebase
npm run build
cp index.html dist/
firebase login
firebase init
firebase deploy
其他功能
- 每個人都有名字
- 定時刪除無用的標記
- …自己想 XD
謝謝大家
<(_ _)>
Vue.js + Firebase 動手做 by Kevin Liao
{"metaMigratedAt":"2023-06-14T11:34:39.427Z","metaMigratedFrom":"Content","title":"Vue.js + Firebase 動手做","breaks":true,"contributors":"[]"}