Socket.io google maps

Question

Socket.io google maps

Navigation

#1 by (2 votes)

3

I am building a small system, to see the location of a user in real time with google maps.

I have a backend echo in node.js (socket.io). A frontend where I see a google map and the scoreboard in real time. and an app which sends the data to the backend.

I have a slight problem, in the frontEnd where I see the map, it does not work correctly, when the user moves, duplicates the marker and moves the marker but not in real time, but it is shown in another duplicate place.

Every so often it duplicates itself ... and when the user (fake) moves, it only duplicates the marker

I have the following in the FrontEnd (where the map is shown)

In app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  zoom: number = 12;
  lat: number = 26.2223073;
  lng: number = 50.5643126;
  markers: any[] = [];

  constructor(private socketService : SocketService) { 
    this.socketService
      .newLatLng()
      .subscribe(data => {
        this.markers.push({lat: data["latLng"][0], lng: data["latLng"][1], label: data["username"]})
      });
  }
}

In app.service.ts

import { Injectable } from '@angular/core';
import { Socket } from 'ng2-socket-io';
import 'rxjs/add/operator/map'; 

@Injectable()
export class SocketService {

    constructor(private socket: Socket) { }

    newLatLng() {
        return this.socket
            .fromEvent("new latLng")
            .map( data => data );
    }
}

in app.component.html (basically the index)

<sebm-google-map 
    [latitude]="lat"
    [longitude]="lng"
    [zoom]="zoom">

    <sebm-google-map-marker 
        *ngFor="let m of markers; let i = index"
        [latitude]="m.lat"
        [longitude]="m.lng"
        [label]=""
        [markerDraggable]="true">

        <sebm-google-map-info-window [isOpen]="true">
          <strong>{{m.label}}<br>Current: {{lat}} - {{lng}}</strong>
        </sebm-google-map-info-window>

    </sebm-google-map-marker>
</sebm-google-map>

Thank you.

javascript typescript angularjs nodejs socket.io

asked by Juan David 17.05.2017 в 16:04

source

1 answer

Put Android on standby by program Driver laravel does not update

score 2 · Accepted Answer

Your problem is that you are doing a Push to markers , and then a stack of markers is generated, which are effectively displayed on the screen. What you should do is clean markers before inserting a new one.

constructor(private socketService : SocketService) { 
    this.socketService
      .newLatLng()
      .subscribe(data => {
        this.markers = []; // o lo que corresponda para vaciar el array
        this.markers.push({lat: data["latLng"][0], lng: data["latLng"][1], label: data["username"]})
      });
  }
}