Angular-google-maps: Servicio de direcciones

La misma pregunta para mí ...

¿Podemos usar el servicio de direcciones con angular2-google-maps?

-> servicio de indicaciones
-> ejemplo

Muchas gracias por tu trabajo
- Chris

A mí también me gustaría saber si esto es algo a lo que puedo acceder. Estoy trabajando en un proyecto bastante pesado de mapas que requiere que uno de los mapas muestre las direcciones sugeridas por Google entre dos ubicaciones. Por favor, avíseme si he revisado la documentación y no la he encontrado. De cualquier manera, ¡este proyecto es fantástico! Gracias por tu trabajo @SebastianM

Esta directiva puede resolver sus necesidades

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core/services/google-maps-api-wrapper';
import { Directive,  Input} from '@angular/core';
declare var google: any;



@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: [],
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

Hola David, gracias por la directiva, pero estoy teniendo dificultades para incluirla en mi código. ¿Debo insertarlo directamente en el mapa de google dom. Por ejemplo:
<sebm-google-map sebm-google-map-directions [origin=x] [destination=y][zoomControl]="false" [latitude]="lat" [longitude]="lng" (mapClick)="mapClicked($event)"> </sebm-google-map>

Estoy teniendo dificultades para hacer que funcione, en realidad soy realmente nuevo en angular 2 ... gracias por tu ayuda

Hola @ahardworker , esta es la manera correcta:

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>
</sebm-google-map>

en la clase de controlador de su componente, debe definir estas propiedades.

origin = { longitude: 4.333, lattitude: -1.2222 };  // its a example aleatory position
destination = { longitude: 22.311, lattitude: -0.123 };  // its a example aleatory position

¡Gracias! Esta funcionando. Pero me pregunto si es posible agregar puntos de referencia dinámicamente y luego actualizar la dirección sin actualizar la página.

En realidad, esto es lo que obtuve:
Agregué a mi componente:

@ViewChild(DirectionsMapDirective) vc:DirectionsMapDirective;
y luego simplemente llamo a vc.updateDirections () desde el componente cada vez que se agrega un nuevo punto de ruta. Lo que devolverá el código en la directiva. ¿Es la forma correcta de hacerlo?

Seguro @ahardworker , waypoints es una matriz de posiciones, puede agregar lógica en la directiva o inyectar esta matriz utilizando un parámetro de entrada.

por ejemplo...

<sebm-google-map>
  <sebm-google-map-directions [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>
</sebm-google-map>

Directiva:

@Directive({
  selector: 'sebm-google-map-directions'
})
export class DirectionsMapDirective {
  @Input() origin;
  @Input() destination;
  @Input() waypoits;
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {}
  ngOnInit(){
    this.gmapsApi.getNativeMap().then(map => {
              var directionsService = new google.maps.DirectionsService;
              var directionsDisplay = new google.maps.DirectionsRenderer;
              directionsDisplay.setMap(map);
              directionsService.route({
                      origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                      destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                      waypoints: waypoints,
                      optimizeWaypoints: true,
                      travelMode: 'DRIVING'
                    }, function(response, status) {
                                if (status === 'OK') {
                                  directionsDisplay.setDirections(response);
                                } else {
                                  window.alert('Directions request failed due to ' + status);
                                }
              });

    });
  }
}

Hola @davidpestana
Intenté incluir la directiva de direcciones pero recibo este error:
Can't bind to 'origin' since it isn't a known property of 'sebm-google-map-directions'.

(No sé, por qué el formato es tan malo, pero espero que puedas leerlo de todos modos)

HTML
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <sebm-google-map-marker [latitude]="latHome" [longitude]="lngHome" [title]="'titleHome'"</sebm-google-map-marker> <sebm-google-map-marker [latitude]="latComp" [longitude]="lngComp" [title]="titleComp"</sebm-google-map-marker> <sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions> </sebm-google-map>

Componente
`@Componente ({
selector: 'google-maps',
estilos: [require ('./ googleMaps.scss')],
plantilla: require ('./ googleMaps.html'),
})
exportar clase GoogleMaps {
latHome: number = 48.151839;
lngHome: number = 13.831726;
latComp: número = 48,329500;
lngComp: número = 14.319765;
titleComp: string = "dynatrace";
zoom: número = 10;

lat: número = (this.latComp + this.latHome) / 2;
lng: número = (this.lngComp + this.lngHome) / 2;

origen = {longitud: 4.333, latitud: -1.2222};
destino = {longitud: 22,311, latitud: -0,123};
} `

¿Tengo que registrar la directiva en algún lugar?

@ProkerBen Sí, debe registrar la directiva en el módulo que está usando como declaración, como cualquier otra directiva que use.

Sí @ProkerBen , como dice @lazarljubenovic, debes registrar la directiva en tu módulo

import { CustomMapDirective } from '[your route to directive folder]/google-map.directive';
...
@NgModule({
  imports: [...],
  exports: [..],
  declarations:[...,CustomMapDirective]
})

@davidpestana DirectionsMapDirective muestra la ruta pero no se

Es una propiedad de la API de Google, cuando se usa DirectionsDisplayService, el mapa se acerca automáticamente para ver todos los puntos de referencia. si establece un valor de zoom, se ignorará.

@davidpestana ya! Probé la función pura de GMapSDK y funciona bien.

}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setOptions({ preserveViewport: true });
    directionsDisplay.setDirections(response);
  } else {
    window.alert('Directions request failed due to ' + status);
  }

DirectionsDisplay.setOptions ({preserveViewport: true}) forzar el mapa mantiene el valor de zoom

@davidpestana Hola,

Tengo un problema con la API. ¡Utilizo la directiva como mostraste en este hilo y funciona muy bien!
El único problema que tengo es cuando necesito mostrar una nueva ruta en el mismo mapa. Llamo a la misma función nuevamente desde el componente principal e imprime la nueva ruta sobre la anterior. Este es el código que tengo:
'
export class DirectionsMapDirective {
@Input () de stination: string;
@Input () origen: cadena;

constructor (private gmapsApi: GoogleMapsAPIWrapper) {

}

ngOnInit(){
    this.setMap();
}

setMap():void{
    this.gmapsApi.getNativeMap().then(map => {
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
        directionsDisplay.setMap(map);
        directionsService.route({
            origin: this.origin,
            destination: this.destination,
            waypoints: [],
            optimizeWaypoints: true,
            travelMode: 'DRIVING'
        }, function(response, status) {
            if (status === 'OK') {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });

    });
}

}
'
Cuando necesito mostrar la nueva ruta, el componente principal llama a la función setMap y las variables de origen y destino cambian.
¿Hay alguna forma de volver a cargar el mapa desde el componente principal?

@davidpestana Yo también tengo el problema descrito por okanok. Si alguien tiene una solución para que el mapa muestre todas las rutas sin reiniciar, sería muy útil.
@okanok , ¿alguna vez lo

Hola @davidpestana y @ahardworker , intenté usar la directiva y el HTML especificado por

Component.ts
origen = {longitud: 4.333, latitud: -1.2222}; // es un ejemplo de posición aleatoria
destino = {longitud: 22,311, latitud: -0,123}; // es un ejemplo de posición aleatoria

Component.html

<sebm-google-map-directions [origin]="origin" [destination]="destination"></sebm-google-map-directions>

Error: InvalidValueError: en el origen de la propiedad: no es una cadena; y no LatLng o LatLngLiteral: en la propiedad lat: no es un número; y propiedad desconocida lat

¿Tienes alguna idea por favor?

Gracias

@developernm escribiste mal la latitud;)

@ bene-starzengruber tenía un poco de prisa jajaja

He seguido este tema con gran interés. Y espero que esto se integre en el proyecto (núcleo).

También estoy interesado en tener la api de planificación de rutas y direcciones.

@davidpestana @ahardworker Han implementado el Mapa con Direcciones. Pero recibo varias direcciones. He adjuntado mi mapa de ruta. ¿Puede sugerir cómo obtener una ruta única en cada momento?

Cada vez que cambie el valor de descripción, llamaré a la directiva My DirectionsMapDirective.

Gracias por adelantado.

@okanok @ marimuthum17 ,
Después de horas de intentarlo, creo que obtuve una solución para este problema ... Aquí puede leer que es necesario definir direccionesDisplay global. Al definir DirectionsDisplay dentro de la directiva, cada vez se creará una nueva instancia de DirectionRenderer y, por lo tanto, no podrá eliminar la ruta anterior.

Entonces creo DirectionRenderer en mi componente.
if(this.directionsDisplay === undefined){ this.mapsAPILoader.load().then(() => { this.directionsDisplay = new google.maps.DirectionsRenderer; this.showDirective = true; }); }

Y luego inyéctelo con @Input() directionsDisplay; en su directiva.

Creo que no está bien ... pero funciona ...

@zuschy Has hecho un GRAN TRABAJO. ¡¡Funciona a las mil maravillas!!. Gracias por tu ayuda.

El cambio que hice es: @Input () directionsDisplay: any; // Tener un tipo agregado para una entrada.

Salvaste mi día.

¿Alguien puede ser tan amable de escribir esto como un ejemplo para incorporarlo al proyecto?

@zuschy , @ marimuthum17
Intenté enviar la visualización de direcciones a la directiva a través de una entrada como esta, pero la visualización de direcciones siempre está indefinida en la directiva.

<sebm-google-map-directions *ngIf="marker_count > 1" [directionsDisplay]="directionsDisplay" [waypointCnt]="waypointCnt" [origin]="origin" [destination]="destination" [waypoints]="waypoints"></sebm-google-map-directions>

en el componente hago esto

 ngOnInit() {
        this.searchControl = new FormControl();
        this.setCurrentPosition();
        if(this.directionsDisplay === undefined){
            this.gmapsApi.getNativeMap().then(map => {               
                this.directionsDisplay = new google.maps.DirectionsRenderer({
                    draggable: true,
                    map: map,
                });
            });
        }

y en la directiva

@Input() directionsDisplay;

ngOnChanges(changes: SimpleChanges) {
        console.log('onChange fired');
        console.log('changing', changes);
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            this.directionsDisplay.addListener('directions_changed', function() {
                computeTotalDistance(this.directionsDisplay.getDirections());
            });

            this.directionsDisplay.setMap(map);
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                if (status === 'OK') {
                    //directionsDisplay.setDirections({routes: []});
                    this.directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });

@zuschy @ marimuthum17 @Giusti
Yo también afronto el mismo problema. Las indicaciones se muestran indefinidas en la directiva.

@ manohar-nyros @Giusti
Aquí cómo he declarado Mi Directiva en Controlador
@ViewChild (DirectionsMapDirective) vc: DirectionsMapDirective;
........ y accedió como beow.
if (this.vc.directionsDisplay === undefined) {this.mapsAPILoader.load (). then (() => {
this.vc.directionsDisplay = new google.maps.DirectionsRenderer;
});

@bonzysalesman @Giusti @ manohar-nyros

He creado el servicio de direcciones de mapas de Google en angular 2 para uno de mis proyectos.
Aquí ha escrito un artículo sobre esto, puede encontrar el código hechicero completo
Aquí tienes una demostración adjunta, si lo deseas también puedes descargar el script. Espero que también ayude a alguien más.

@ marimuthum17
Muchas gracias, voy a echarle un vistazo, otro problema es cómo agregaría campos de autocompletar en un ng-for, digamos que en su ejemplo tendría un botón + y aparecería otro campo de búsqueda. ya que los campos de búsqueda deben estar vinculados a #pickupInput / #pickupoutput y debe tener un @Viewchild ?

@ marimuthum17
Gracias por el apoyo. Eso funciona bien para mí. Muchas gracias de nuevo.

@ marimuthum17 , @zuschy
Oye, la directiva está funcionando muy bien hasta ahora, pero encontré otro problema:

Cuando el usuario arrastra un marcador de la ruta generada y luego agrega un marcador a la ruta, el marcador arrastrado vuelve a su punto de inicio (porque llamo this.vc.updateDirections()) creo que es porque el origen en el componente no se actualiza cuando Escucho las "direcciones_cambiadas" en la directiva.

Intenté crear un @Output en la Directiva pero parece que no puedo usar el origen como @Input y @Output
También intenté colocar el oyente en ngOnInit en el Componente donde se crea directionsDisplay pero de alguna manera queda indefinido en .addListener

Y no estoy seguro de qué marcador se arrastra, por lo que mi idea fue crear un caso de cambio en el oyente Directions_changed y verificar si requestOrigin coincide con el origen / destino o con 1 de los puntos de referencia.

Aquí está mi código

Directiva

export class DirectionsMapDirective {
    // get variables from map.component
    @Input() origin;
    @Input() destination;
    @Input() waypoints;
    @Input() waypointCnt;
    @Input() directionsDisplay;

    constructor (private gmapsApi: GoogleMapsAPIWrapper) {}

    // updateDirections has 2 optional parameters. gets called in map.component
    updateDirections(directionsDisplay, o?, d?){
        this.gmapsApi.getNativeMap().then(map => {
            var directionsService = new google.maps.DirectionsService;
            directionsDisplay.addListener('directions_changed', function() {
                //this.vc.computeTotalDistance(this.directionsDisplay.getDirections());

                if(directionsDisplay && directionsDisplay.dragResult){
                    let requestOrigin = directionsDisplay.dragResult.request.origin;
                    let requestDestination = directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(directionsDisplay);
                    }
                }
                console.log(directionsDisplay);
            });


            //if origin / destination are undefined use value from optional parameters.
            directionsDisplay.setMap(map);
            if(!this.destination && d) {
                this.destination = d;
            }
            if(!this.origin && o) {
                this.origin = o;
            }

            // give the route the data, travel mode is driving bc users should plan a camping/ roadtrip.
            directionsService.route({
                origin: {lat: this.origin.latitude, lng: this.origin.longitude},
                destination: {lat: this.destination.latitude, lng: this.destination.longitude},
                waypoints: this.waypoints,
                optimizeWaypoints: true,
                travelMode: 'DRIVING'
            }, function(response, status) {
                console.log(status);
                if(status == 'OK'){
                    console.log('new route created')
                    var legs = response.routes[0].legs;
                    for (var i = 0; i < legs.length; i++) {
                        let inputFieldStart = document.getElementById('start') as HTMLInputElement;
                        let inputFieldDestination = document.getElementById('destination') as HTMLInputElement;
                        if(inputFieldStart.value == ''){
                            inputFieldStart.value = legs[i].start_address;
                        }
                        if(inputFieldDestination.value == ''){
                            inputFieldDestination.value = legs[i].end_address;
                        }
                    }
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                }else{
                    console.log('keine Route möglich!')
                }
            });

            //function for displaying the travel distance
            function computeTotalDistance(result) {
                var total = 0;
                var myroute = result.routes[0];
                for (var i = 0; i < myroute.legs.length; i++) {
                    total += myroute.legs[i].distance.value;
                }
                total = total / 1000;
                document.getElementById('trip_length').innerHTML = 'The trip is <span id="trip_length_nr">' +total + '</span>km long.';
            }
        });
    }
}

Componente:

Aquí básicamente llamo this.vc.updateDirections(this.directionsDisplay); en Mapclicked / Autocomplete

Cuando probé el Listener aquí así: (el primero si después de addListener directionsDisplay = undefined)

ngOnInit() {


        this.searchControl = new FormControl();

        this.setCurrentPosition();

        this.mapsAPILoader.load().then(() => {
            this.geocoder = new google.maps.Geocoder;
            this.directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
            this.directionsDisplay.addListener('directions_changed', function() {
                //directionsDisplay = undefined?????
                if(this.directionsDisplay && this.directionsDisplay.dragResult){
                    let requestOrigin = this.directionsDisplay.dragResult.request.origin;
                    let requestDestination = this.directionsDisplay.dragResult.request.destination;
                    console.log(this.origin)
                    if(this.origin && (requestOrigin.lat.toString() == this.origin.latitude && requestOrigin.lng.toString() == this.origin.longitude)){
                        console.log('if?');
                        let temp_lat = requestDestination.lat.toString();
                        let temp_lng = requestDestination.lng.toString();
                        this.origin.latitude = temp_lat;
                        this.origin.longitude = temp_lng;
                        this.vc.updateDirections(this.directionsDisplay);
                    }
                }
                console.log(this.directionsDisplay);
            });
            let autocomplete = new google.maps.places.Autocomplete(this.OriginSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete2 = new google.maps.places.Autocomplete(this.DestinationSearchElementRef.nativeElement, {
                types: ["address"]
            });
            let autocomplete3 = new google.maps.places.Autocomplete(this.WaypointSearchElementRef.nativeElement, {
                types: ["address"]
            });

            autocomplete.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete, 'origin');
            });
            autocomplete2.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete2, 'destination');
                this.vc.updateDirections(this.directionsDisplay);
            });
            autocomplete3.addListener("place_changed", () => {
                this.addAutocomplete(autocomplete3, 'waypoint');
                this.vc.updateDirections(this.directionsDisplay);
            });

        });

    }

Pregunta:

Actualmente suscrito a la lista en la base de datos. Estoy usando ngFor para crear y eliminar marcadores cuando se agregan o eliminan de la base de datos. ¿Hay alguna forma de asociar direcciones con marcadores particulares y luego eliminar las direcciones cuando el marcador se elimina del mapa?

Básicamente, el usuario dice que están disponibles en la aplicación. El marcador aparece en el mapa con indicaciones para llegar a la ubicación. Cuando dicen que no están disponibles. Quiero que el marcador y las direcciones asociadas a él se eliminen del mapa.

También miro la ubicación del usuario con watchPosition. Obviamente, desea actualizar la posición del marcador, así como las direcciones.

@davidpestana gracias por un trabajo tan brillante ... Implementé la directiva básica pero me dio el error "Solicitud de direcciones fallida debido a ZERO_RESULTS". ¿Pueden ayudarme con este error?

También estoy enfrentando este problema, verifique esto:

https://github.com/SebastianM/angular-google-maps/issues/985

Eso no tiene nada de malo en el código.
Verifique que haya agregado su clave de mapa de Google al llamar a API. o Según los documentos de Google, hay una solicitud de límite de cetain para todos los días.

@ marimuthum17 tiene razón, no había nada incorrecto en su código ... En realidad, me perdí parte de placeId ... No estaba proporcionando placeId correctamente, ese era el problema ...

@ MartiniHenry1988 tiene un problema porque no está utilizando el servicio de dirección de Google ... consulte el comentario anterior de @ marimuthum17 para obtener un ejemplo completo.

¿Cambió algo ?, recibo el siguiente error en la línea directionsDisplay.setMap(map);

Argument of type 'GoogleMap' is not assignable to parameter of type 'Map'

@kildareflare @amitdahan veo que ustedes pueden haber encontrado el mismo problema, ¿alguna vez encontraron una solución?

Yo también estoy enfrentando este problema. @chaoranxie ¿has encontrado una solución?

Lo siento, sé que el tema ya es un poco antiguo, pero tengo problemas y este es el error:
No se puede enlazar a 'origen' porque no es una propiedad conocida de 'sebm-google-map-Directions'.
pero arriba di una solución y no tengo claro cómo hacerlo, ¿alguien me podría dar un ejemplo?

Perdón por mi mal ingles

@ Fabian-Thug, ¿qué versión de Angular estás usando? Estoy en 4 * y las directivas funcionan de manera diferente.
En la Directiva, cambie la sintaxis de selector: 'sebm-google-map-directions' a selector ['sebm-google-map-Directions'] y luego en el HTML agréguelo a un elemento en lugar de AS un elemento (ejemplo

@davidpestana @ marimuthum17 He hecho lo anterior. Ahora muestra la dirección entre la ubicación actual del usuario y el destino seleccionado.
¡Pero necesito cambiar los iconos de los marcadores! ¿Como hacer eso?
¿Cómo incluir marcadores personalizados en el resultado de dirección?

@davidpestana
le da a esta solución la importación {CustomMapDirective} de '[su ruta a la carpeta de directivas] /google-map.directive'; pero para esto, ¿necesito instalar algún paquete?

Obteniendo un ERROR TypeError: No se puede establecer la propiedad 'origen' de indefinido.

@ViewChild (DirectionsMapDirective) vc: DirectionsMapDirective;
origen público: cualquiera;
destino público: cualquiera;
constructor(
servicio modal privado: NgbModal,

private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private gmapsApi: GoogleMapsAPIWrapper,
private _elementRef : ElementRef

) {}

Pasando valores
this.vc.origin = {longitud: 77.333, latitud: 12.2222};
this.vc.destination = {longitud: 90.311, latitud: 28.123};
this.vc.updateDirections ();

Gracias por adelantado.

tengo dos puntos en mi mapa, ¿cómo puedo obtener direcciones entre ellos?

componente.ts

importar {Componente} desde '@ angular / core';
importar {MouseEvent} desde '@ agm / core';

@Componente({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
zoom: número = 8;

lat: número = 51,673858;
lng: número = 7.815982;

marcadores: marcador [] = [
{
latitud: 51.673858,
lng: 7.815982,
etiqueta: 'A',
arrastrable: verdadero
},
{
latitud: 51.373858,
lng: 7.215982,
etiqueta: 'B',
arrastrable: falso
}
]

}

marcador de interfaz {
lat: número;
lng: número;
etiqueta ?: cadena;
arrastrable: booleano;
}

@davidpestana cuando intento usar su código,
"No se puede enlazar a 'origin' porque no es una propiedad conocida de 'sebm-google-map-Directions"

1. Si 'sebm-google-map-directions' es un componente angular y tiene una entrada de 'origen', verifique que sea parte de este módulo.
2. Si 'sebm-google-map-directions' es un componente web, agregue 'CUSTOM_ELEMENTS_SCHEMA' a '@ NgModule.schemas' de este componente para suprimir este mensaje.
3. Para permitir cualquier propiedad, agregue 'NO_ERRORS_SCHEMA' a '@ NgModule.schemas' de este componente. ("
   

@davidpestana Vale la pena señalar que sus puntos de referencia se pueden definir como una respuesta de la API de lugares, LatLng o similares:

let waypoints = [
    {location: {placeId: place_id}}
];

https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests

Todo esto funcionó para mí, ¡gracias! ¿Valdría la pena agregar esto a agm / core si estuviera en el mismo formato que las otras directivas?

¿Hay alguna actualización sobre esto?

¿Es posible usar origin y destination como cadena?

la razón por la que no puede acceder a la estimación de _tiempo y distancia_ es porque este bloque de código a continuación. Esta es una función de devolución de llamada anónima, donde no tiene acceso de lectura / escritura de las variables this.xyz de la clase.
}, function(response: any, status: any) {

Pude almacenar la información y usar los servicios dentro de esa función después de cambiar a la siguiente. utiliza la función de flecha es6 que es nativa de las clases mecanografiadas. más información aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
}, (response: any, status: any) => {

Hola,
¿Alguien puede mostrarme cómo crear un evento, como hacer clic en la ubicación de inicio como salida en una ruta de la ruta de dirección?

Gracias

Hola @davidpestana , @ marimuthum17 , @okanok

Me enfrento a un nuevo problema como, cuando dibujo la ruta por primera vez, se muestra correctamente, si estoy tratando de dibujar otra ruta, la primera no se está despejando y para la nueva ruta, la línea no se muestra.

Aquí está mi código

componente.ts,

showDirections( ) { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.org = { latitude: position.coords.latitude, longitude: position.coords.longitude}; this.dst = {longitude: this.cycle.longitude, latitude: this.cycle.latitude}; console.log('Src ' + this.org.latitude ); console.log('Dst' + this.dst.latitude ); }); } }

Esta función se llama después de hacer clic en un botón por parte del usuario. y el html del componente,
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"> <appCycleDirection *ngIf="dst !== undefined" [org]="org" [dst]="dst"></appCycleDirection> <agm-marker [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>

El código de la directiva es el siguiente,

`` ``
importar {Directiva, Entrada, OnInit} desde '@ angular / core';
importar {GoogleMapsAPIWrapper} desde '@ agm / core';

declarar dejar google: cualquiera;
@Directiva({
// tslint: disable-next-line: directive-selector
selector: 'appCycleDirection'
})
La clase de exportación CycleDirectionDirective implementa OnInit {

@Input () org;
@Input () dst;
@Input () origenPlaceId: cualquiera;
@Input () destinationPlaceId: cualquiera;
@Input () waypoints: cualquiera;
@Input () DirectionsDisplay: cualquiera;
@Input () tiempo estimado: cualquiera;
@Input () EstimadaDistancia: cualquiera;
constructor (gmapsApi privado: GoogleMapsAPIWrapper) {}

ngOnInit () {
console.log ('En directiva');
console.log (this.org);
this.gmapsApi.getNativeMap (). luego (map => {
const directionsService = new google.maps.DirectionsService;
const DirectionsDisplay = new google.maps.DirectionsRenderer;
direccionesDisplay.setMap (mapa);
DirectionsService.route ({
origen: {lat: this.org.latitude, lng: this.org.longitude},
destino: {lat: this.dst.latitude, lng: this.dst.longitude},
waypoints: [],
optimizarWaypoints: verdadero,
travelMode: 'TRANSIT'
}, función (respuesta, estado) {
if (status === 'OK') {
direccionesDisplay.setDirections (respuesta);
console.log (respuesta);
} demás {
window.alert ('Error en la solicitud de indicaciones debido a' + estado);
}
});

});

}

}

''

¿Qué está mal con mi código? Quiero que desaparezca la primera ruta cuando se muestre la nueva ruta.

Hola, ¿podemos poner un evento de clic en el camino?
Gracias

He usado la misma directiva en mi proyecto y funciona bien. Solo una pregunta rápida, ¿es posible mostrar el tráfico (secciones rojas, amarillas o azules en línea) en la carretera como en los mapas de conducción de Waze, Uber o lyft?
Tu ayuda es altamente apreciada

Este tipo ha hecho un excelente trabajo con esta directiva, la he probado y funciona muy bien, por favor considere si se puede incluir en AGM.

https://github.com/explooosion/Agm-Direction

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.