Firebase 有没有办法找到当前用户Ionic 5+;火基
这几天我做了很多研究,想找到一种像waze一样显示地图的方法(你可以导航,也可以看到用户在你身边使用应用程序)。对于这个应用程序,我使用firebase和ionic 5,我可以显示一个用户的位置(当前用户),但我找不到一种方法来查找和显示其他用户的位置,因为它是应用程序的核心,非常重要。我还需要每15秒刷新一次用户的位置,这对客户端来说会很沉重吗 我还没有找到一个API或一种方法来做它,这个项目对我来说意义重大,所以如果有人能给我一些建议,我会很高兴 以下是我显示地图的代码:Firebase 有没有办法找到当前用户Ionic 5+;火基,firebase,ionic-framework,google-maps-api-3,Firebase,Ionic Framework,Google Maps Api 3,这几天我做了很多研究,想找到一种像waze一样显示地图的方法(你可以导航,也可以看到用户在你身边使用应用程序)。对于这个应用程序,我使用firebase和ionic 5,我可以显示一个用户的位置(当前用户),但我找不到一种方法来查找和显示其他用户的位置,因为它是应用程序的核心,非常重要。我还需要每15秒刷新一次用户的位置,这对客户端来说会很沉重吗 我还没有找到一个API或一种方法来做它,这个项目对我来说意义重大,所以如果有人能给我一些建议,我会很高兴 以下是我显示地图的代码: import {
import { ModalAlertPage } from './../dialog/modal-alert/modal-alert.page';
import { GeoPos } from './../shared/geopos';
import { UserService } from './../user.service';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Plugins } from '@capacitor/core';
const { Geolocation } = Plugins;
import * as firebase from 'Firebase';
import { interval, Observable } from 'rxjs';
import { Router } from '@angular/router';
import { Device } from '@ionic-native/device/ngx';
import { ModalController, Platform } from '@ionic/angular';
declare var google: any;
/*
Source : https://www.djamware.com/post/5a48517280aca7059c142972/ionic-3-angular-5-firebase-and-google-maps-location-tracking
*/
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {
@ViewChild('map') mapElement: ElementRef;
map: any;
markers = [];
ref = firebase.database().ref('geolocations/');
geoposition = {} as GeoPos;
geoposRef;
coords: any;
isTracking = false;
user = JSON.parse(localStorage.getItem('user'));
constructor(public platform: Platform, public router: Router, private device: Device, public modalController: ModalController) {
platform.ready().then(() => {
this.initMap();
});
this.ref.on('child_changed', resp => {
this.deleteMarkers();
snapshotToArray(resp).forEach(data => {
if (data.uuid !== this.device.uuid) {
let image = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
this.addMarker(updatelocation, image);
this.setMapOnAll(this.map);
} else {
let image = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
this.addMarker(updatelocation, image);
this.setMapOnAll(this.map);
}
});
});
}
async presentModal() {
const modal = await this.modalController.create({
component: ModalAlertPage,
cssClass: 'modal-alert',
componentProps: {
'user': firebase.auth().currentUser
//TODO IMPLEMENTER LA NOTIFICATION
},
backdropDismiss: true,
showBackdrop: true
});
return await modal.present();
}
ngOnInit(): void {
}
stopGoogleGeolocation(identifier) {
Geolocation.clearWatch(identifier);
}
//TESTS COPIÉS
initMap() {
let watch;
Geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
let mylocation = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
console.log(Geolocation.getCurrentPosition());
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: mylocation
});
});
return watch = Geolocation.watchPosition({}, (position, err) => {
this.deleteMarkers();
let updatelocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let image = 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
this.addMarker(updatelocation, image);
this.setMapOnAll(this.map);
});
}
addMarker(location, image) {
let marker = new google.maps.Marker({
position: location,
map: this.map,
icon: image
});
this.markers.push(marker);
}
setMapOnAll(map) {
for (var i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(map);
}
}
clearMarkers() {
this.setMapOnAll(null);
}
deleteMarkers() {
this.clearMarkers();
this.markers = [];
}
}
export const snapshotToArray = snapshot => {
let returnArr = [];
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
};
从“/../dialog/modal alert/modal alert.page”导入{ModalAlertPage};
从“/../shared/GeoPos”导入{GeoPos};
从“/../user.service”导入{UserService};
从“@angular/core”导入{Component,ElementRef,OnInit,ViewChild};
从“@capactor/core”导入{Plugins};
const{Geolocation}=插件;
从“firebase”导入*作为firebase;
从“rxjs”导入{interval,Observable};
从'@angular/Router'导入{Router};
从'@ionic native/Device/ngx'导入{Device};
从“@ionic/angular”导入{ModalController,Platform}”;
声明:任何;
/*
资料来源:https://www.djamware.com/post/5a48517280aca7059c142972/ionic-3-angular-5-firebase-and-google-maps-location-tracking
*/
@组成部分({
选择器:“app-tab2”,
templateUrl:'tab2.page.html',
样式URL:['tab2.page.scss']
})
导出类Tab2Page实现OnInit{
@ViewChild('map')mapElement:ElementRef;
地图:任何;
标记=[];
ref=firebase.database().ref('geologies/');
地理位置={}作为地理位置;
geoposRef;
coords:任何;
isTracking=false;
user=JSON.parse(localStorage.getItem('user'));
构造函数(公共平台:平台,公共路由器:路由器,专用设备:设备,公共modalController:modalController){
platform.ready()。然后(()=>{
this.initMap();
});
此.ref.on('child_changed',resp=>{
这个.deleteMarkes();
快照阵列(resp.forEach)(数据=>{
if(data.uuid!==this.device.uuid){
让图像显示http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
让updatelocation=new google.maps.LatLng(data.latitude,data.longitude);
this.addMarker(updatelocation,image);
this.setmaponal(this.map);
}否则{
让图像显示http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
让updatelocation=new google.maps.LatLng(data.latitude,data.longitude);
this.addMarker(updatelocation,image);
this.setmaponal(this.map);
}
});
});
}
异步呈现模式(){
const modal=等待this.modalController.create({
组成部分:ModalAlertPage,
cssClass:“模式警报”,
组件和支柱:{
“用户”:firebase.auth().currentUser
//TODO实现者LA通知
},
背景:是的,
背景:真的
});
return wait modal.present();
}
ngOnInit():void{
}
stopGoogleGeolocation(标识符){
地理位置.clearWatch(标识符);
}
//考普埃斯
initMap(){
让我们拭目以待;
getCurrentPosition({maximumAge:3000,超时:5000,enableHighAccurance:true})。然后((resp)=>{
让mylocation=new google.maps.LatLng(resp.coords.lation,resp.coords.longitude);
log(Geolocation.getCurrentPosition());
this.map=new google.maps.map(this.mapeElement.nativeElement{
缩放:15,
中心:mylocation
});
});
return watch=Geolocation.watchPosition({},(position,err)=>{
这个.deleteMarkes();
让updatelocation=new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
让图像显示http://maps.google.com/mapfiles/ms/icons/blue-dot.png';
this.addMarker(updatelocation,image);
this.setmaponal(this.map);
});
}
添加标记(位置、图像){
让marker=new google.maps.marker({
位置:位置,,
map:this.map,
图标:图像
});
这个。标记。推(标记);
}
setMapOnAll(地图){
对于(var i=0;i{
让returnArr=[];
snapshot.forEach(childSnapshot=>{
让item=childSnapshot.val();
item.key=childSnapshot.key;
返回推送(项目);
});
返回arr;
};
这一个允许我只找到一个用户,例如,我应该在他周围创建一个半径并检索这个半径内的用户吗?但是如何找到它们呢?我有点迷路了
非常感谢:)