Отслеживание позиции нескольких пользователей с помощью Google watchPosition и Vue.js - PullRequest
Новая
       16

Отслеживание позиции нескольких пользователей с помощью Google watchPosition и Vue.js

0 голосов
/ 16 апреля 2019

У меня есть игра, которая отслеживает каждого игрока и отображает ее в режиме реального времени в таблице лидеров. У меня возникли некоторые проблемы, и я надеялся, что кто-то может помочь. Я думаю, что это как-то связано с currentPositionMarker.

Ниже мой код. Вот два основных метода: 

setCurrentPosition(tracker,team,icon) {
            this.currentPositionMarker = new google.maps.Marker({
                map: this.map,
                position: new google.maps.LatLng(
                    tracker.geolocation.lat,
                    tracker.geolocation.lng
                ),
                title: team.team_name,
                icon: icon
            });

            // this.map.panTo(new google.maps.LatLng(
            //     tracker.geolocation.lat,
            //     tracker.geolocation.lng
            // ));

            var myoverlay = new google.maps.OverlayView();
            myoverlay.draw = function () {
                this.getPanes().markerLayer.id='markerLayer';
            };
            myoverlay.setMap(this.map);

            var contentString = '<div id="content">'+
            '<p class="team-name">'+team.team_name+'</p>'+
            '<p class="time"><span>'+moment(tracker.timestamp).format('h:mm a')+'</span></p>'+
            '</div>';


            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            infowindow.open(this.map, this.currentPositionMarker);

        },

setMarkerPosition(marker, position) {
            let bounds, loc;
            bounds = new google.maps.LatLngBounds();

            loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
            bounds.extend(loc);

            marker.setPosition(
                new google.maps.LatLng(
                    position.lat,
                    position.lng,)
            );
        },

Мой код отслеживания работает нормально и находится в другом месте. Мой код отслеживания обновляет базу каждые 15 секунд. Я использую Google Firestore.

В моем смонтированном методе у меня есть этот код: 

let mapRef = db.collection('map')
    mapRef = mapRef.where('gid', '==', this.$store.getters.gid)
    mapRef.onSnapshot(snapshot => {
        snapshot.docChanges().forEach(change => {
            if(change.type == 'added') {
                let docs = change.doc
                this.tracker = docs.data(),
                this.tracker.id = docs.data().id
                let teamRef = db.collection('teams')
                teamRef = teamRef.where('team_id', '==', this.tracker.team)
                teamRef = teamRef.where('gid', '==', this.$store.getters.gid)
                teamRef.get().then((snapshot) => {
                    snapshot.forEach(doc => {
                        this.team = doc.data(),
                        this.team.id = doc.id

                        let image = this.team.url
                        var icon = {
                            url: image, // url
                            scaledSize: new google.maps.Size(50, 50), // scaled size
                            origin: new google.maps.Point(0,0), // origin
                            anchor: new google.maps.Point(0, 0), // anchor
                            optimized:false
                        };

                        this.setCurrentPosition(this.tracker, this.team, icon)

[... additional code]

Когда база данных обновляется (каждые 15 секунд), вызывается следующий метод: 

let mapRef = db.collection('map')
        mapRef = mapRef.where('gid', '==', this.$store.getters.gid)
        mapRef = mapRef.orderBy('timestamp')
        mapRef.onSnapshot(snapshot => {
            snapshot.docChanges().forEach(change => {
                let tracker = change.doc
                let teamRef = db.collection('teams')
                teamRef = teamRef.where('team_id', '==', tracker.data().team)
                teamRef = teamRef.where('gid', '==', this.$store.getters.gid)
                teamRef.get().then((snapshot) => {
                    snapshot.forEach(doc => {
                        this.team = doc.data(),
                        this.team.id = doc.id

                        // create a marker
                        if(tracker.data().geolocation){

                          let image = this.team.url
                          var icon = {
                            url: image, // url
                            scaledSize: new google.maps.Size(50, 50), // scaled size
                            origin: new google.maps.Point(0,0), // origin
                            anchor: new google.maps.Point(0, 0), // anchor
                            optimized:false
                          };

                          this.setMarkerPosition(
                              this.currentPositionMarker,
                              tracker.data().geolocation
                          );

[.... additional code]
...