Dibujar una polilínea suave en Google Maps

3 minutos de lectura

Estoy usando googlemaps api para dibujar Polyline entre coordenadas (Lat/Lang) obtenidas de un dispositivo GPS usando Angular 6. Las coordenadas se actualizan con un intervalo de 10 segundos. Estoy usando la clase Polyline de Google Maps para dibujar la línea, pero el problema es que cada vez que dibuja una línea entre los dos puntos (punto nuevo y punto antiguo), salta instantáneamente entre los puntos en lugar de hacer un dibujo de ruta animada suave similar a Uber . Necesito un dibujo de ruta suave entre puntos.

Estoy leyendo las coordenadas de un archivo JSON por el momento.

Puede alguien ayudarme con esto.?

Aquí está el código para dibujar Polyline:

import { Component } from '@angular/core';
import { ViewChild } from "@angular/core";

import { } from 'googlemaps'
// import { } from '@types/googlemaps'
import { DataFetcherService } from "src/app/services/data-fetcher.service";

import { map } from 'rxjs/operators';
import { of, from } from "rxjs";
import { Promise } from "q";
// import {} fr

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title="maps-app";
  @ViewChild('gmap') gmapElement: any;
  map: google.maps.Map;
  snappedPolyline: google.maps.Polyline;
  icon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  private snappedCoordinates: any[] = [];
  index = 1;
  markerOffset = 0;
  prevMarkerOffset = 0;
  prevlatlng;
  latlng;
  ngOnInit() {

      this.initMap()

     // Define the symbol, using one of the predefined paths ('CIRCLE')
      // supplied by the Google Maps JavaScript API.
      var lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeColor: '#393'
      };

    this.snappedPolyline = new google.maps.Polyline({
        path: this.snappedCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        icons: [{
          icon : lineSymbol,
          offset: '100%'
        }],
        map: this.map
      })
      this.setCenter();
  }
   constructor (private dataFetcher: DataFetcherService){ }
  initMap(){
    let mapProp = {
      center: new google.maps.LatLng(8.89443000002,76.61418),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
  }

  ngAfterContentInit(){

    console.log("After content init")
    this.dataFetcher.fetchJSONData('assets/data/latlangobj.json').subscribe(data => {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(8.89443000002,76.61418),
        map: this.map,
        icon: this.icon,
        title: 'Center !'
      });

      data.forEach((cordinates) => {

        setTimeout(() =>
        {       
          console.log("setTimeout(), this.index * 12000 :", this.index * 12000)
          this.prevlatlng = this.latlng          
          this.latlng = new google.maps.LatLng(cordinates.lat, cordinates.lng)
          this.snappedPolyline.getPath().push(this.latlng);
          this.prevlatlng = this.latlng
          this.snappedPolyline.setMap(this.map);
          this.updateMarkerPosition(this.map, marker, cordinates.lat, cordinates.lng);
        }, this.index * 500);  // 6k *  this.index
        ++this.index
      });  
      }, // outer-observable ends here
     err => console.error(err)
    )
  }

  calculateDistances(start, end) {

    var stuDistances = {};
    const metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);    // distance in metres
        return metres
    }

      // update marker position
      updateMarkerPosition(map, marker, lat, lon) {
          console.log("MoveMarker()")
          try {
          marker.setPosition(new google.maps.LatLng(lat, lon));
          map.panTo(new google.maps.LatLng(lat, lon));
        } catch (e) {}
      }
    // set the center to the updated latlang
  setCenter() {
    this.map.setCenter(new google.maps.LatLng(8.89443000002,76.61418));

    let marker = new google.maps.Marker({
      position: new google.maps.LatLng(8.89443000002,76.61418),
      map: this.map,
      icon: this.icon,
      title: 'Center !'
    });
}

  • duplicado stackoverflow.com/questions/29810345/…

    – Danil Gudz

    16 de enero de 2019 a las 13:35

  • ¿Puedes aclarar en qué se parece al enlace que señalaste? Solicito actualizar sin problemas mi marcador dibujando una polilínea a medida que los datos provienen de un dispositivo GPS. No necesito ningún diseño específico para la curva, en cambio, necesito una ruta animada (suave) dibujada como polilínea en el mapa a medida que avanza el dispositivo.

    –Usman Ahmad

    16 de enero de 2019 a las 13:57

  • @UsmanAhmad, ¿has encontrado alguna solución a esto?

    – Wei-jye

    18 de julio de 2019 a las 4:25

¿Ha sido útil esta solución?