Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/firebase/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ionic-framework/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Firebase 有没有办法找到当前用户Ionic 5+;火基_Firebase_Ionic Framework_Google Maps Api 3 - Fatal编程技术网

Firebase 有没有办法找到当前用户Ionic 5+;火基

Firebase 有没有办法找到当前用户Ionic 5+;火基,firebase,ionic-framework,google-maps-api-3,Firebase,Ionic Framework,Google Maps Api 3,这几天我做了很多研究,想找到一种像waze一样显示地图的方法(你可以导航,也可以看到用户在你身边使用应用程序)。对于这个应用程序,我使用firebase和ionic 5,我可以显示一个用户的位置(当前用户),但我找不到一种方法来查找和显示其他用户的位置,因为它是应用程序的核心,非常重要。我还需要每15秒刷新一次用户的位置,这对客户端来说会很沉重吗 我还没有找到一个API或一种方法来做它,这个项目对我来说意义重大,所以如果有人能给我一些建议,我会很高兴 以下是我显示地图的代码: import {

这几天我做了很多研究,想找到一种像waze一样显示地图的方法(你可以导航,也可以看到用户在你身边使用应用程序)。对于这个应用程序,我使用firebase和ionic 5,我可以显示一个用户的位置(当前用户),但我找不到一种方法来查找和显示其他用户的位置,因为它是应用程序的核心,非常重要。我还需要每15秒刷新一次用户的位置,这对客户端来说会很沉重吗

我还没有找到一个API或一种方法来做它,这个项目对我来说意义重大,所以如果有人能给我一些建议,我会很高兴

以下是我显示地图的代码:


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;
};
这一个允许我只找到一个用户,例如,我应该在他周围创建一个半径并检索这个半径内的用户吗?但是如何找到它们呢?我有点迷路了

非常感谢:)