Я использую API карты Google, геолокацию.
Я хочу обновить местоположение пользователя, когда пользователь входит в систему или регистрируется.Но в моей базе данных Firebase местоположение пользователя равно нулю, и я вообще не вижу маркер.
Вот мой код.Я изменил getCurrentPosition на watchPosition один раз, но это не сработало.И в моей консоли ничего не показывается.
Моя FireBase - последняя версия.Если вам нужно еще несколько кодов, чтобы ответить, пожалуйста, спросите меня.
Когда я вхожу в систему, мое место установлено правильно, и мое местоположение помещено в центр.
<template>
<div class="map">
<div class="google-map" id="map"></div>
</div>
</template>
<script>
import firebase from 'firebase'
import db from '@/firebase/init'
export default {
name: 'GMap',
data() {
return {
lat: 53,
lng: -2
}
},
methods: {
renderMap() {
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: this.lat , lng: this.lng },
zoom: 6,
maxZoom: 15,
minZoom: 3,
streetViewControl: false
})
db.collection('users').get().then(users => {
users.docs.forEach(doc => {
let data = doc.data()
if(data.geolocation) {
let marker = new google.maps.Marker({
position: {
lat: data.geolocation.lat,
lng: data.geolocation.lng
},
map
})
//add click event to marker
marker.addListener('click', () => {
//console.log(doc.id)
this.$router.push({ name: 'ViewProfile', params: { id: doc.id }} )
})
}
})
})
}
},
mounted() {
//get current user
let user = firebase.auth().currentUser
//get user geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(pos => {//pos=position
this.lat = pos.coords.latitude
this.lng = pos.coords.longitude
//find user record and then update geocoords
db.collection('users').where('user_id', '==', 'cred.user.uid').get()
.then(snapshot => {
snapshot.forEach((doc) => {
db.collection('users').doc(doc.id).update({
geolocation: {
lat: pos.coords.latitude,
lng: pos.coords.longitude,
}
})
})
}).then(() => {
this.renderMap()
})
}, (err) => {
console.log(err)
this.renderMap()
}, { enableHighAccuracy: true, maximumAge: 60000, timerout: 3000 })
} else {
//position centre by default values
this.renderMap()
}
}
}
</script>
<style lang="">
.google-map {
width: 100%;
height: 100%;
margin: 0 auto;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB9n8HHOm0YVLwSf6tbuU3p69t8bqlUVSE"
type="text/javascript"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>geo-ninjas</title>
</head>
<body>
<noscript>
<strong>We're sorry but geo-ninjas doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>