Estoy construyendo un pequeño sistema, para ver la localizacion de un usuario en tiempo real con google maps.
Tengo un backend echo en node.js (socket.io). Un frontend donde veo un mapa de google y el marcador en tiempo real. y una app la cual envia los datos al backend.
Tengo un ligero problema, en el frontEnd donde veo el mapa, no me funciona correctamente, cuando el usuario se mueve, duplica el marcador y mueve el marcador pero no en tiempo real, si no que se muestra en otro lugar duplicado.
cada cierto tiempo se duplica solo.. y cuando el usuario (fake) se mueve, solo duplica tambien el marcador
Tengo en el FrontEnd ( donde se ve el mapa) lo siguiente
En 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"]})
});
}
}
En 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 );
}
}
en app.component.html (basicamente el 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>
Gracias.