javascript - 使用 Google 的 watchPosition 和 Vue.js 跟踪多个用户的位置

Question

我有一个游戏可以跟踪每个玩家并在排行榜上实时显示。我遇到了一些问题，希望有人能伸出援手。我认为这与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]

标签： javascriptgoogle-mapsvue.jsgoogle-maps-api-3google-maps-markers