explooosion / Agm-Direction

This is the directive for @agm/core (not official)
https://robby570.tw/Agm-Direction-Docs/
MIT License
75 stars 26 forks source link

Waypoint unexpected behaviour #73

Closed abdullah951 closed 5 years ago

abdullah951 commented 5 years ago

I have three latlng. One for origin, other for waypoint and third for destination. It draws extra route which is from waypoint to so unknown location. Is this a bug? Following is my code. Any suggestions sir this.origin = { lat: Number(lat1), lng: Number(lng1) }; this.waypoints = [{ location: { lat: Number(lat3), lng: Number(lng3) }, stopover: false, }]; this.destination = { lat: Number(lat4), lng: Number(lng4) }; this.renderOptions = { polylineOptions: { strokeColor: '#0f0' }, suppressMarkers: true }; this.markerOptions = { origin: { infoWindow: 'Origin', icon: 'http://i.imgur.com/7teZKif.png', }, waypoints: [{ infoWindow: 'Restaurant', icon: 'http://i.imgur.com/7teZKif.png' }], destination: { infoWindow: 'Destination', icon: 'http://i.imgur.com/7teZKif.png', } };

explooosion commented 5 years ago

Hi @abdullah951, sorry for late reply.

It's work for me. Here is my sample implement your code.

HTML

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-direction
   [origin]="origin"
   [destination]="destination"
   [waypoints]="waypoints"
   [renderOptions]="renderOptions"
   [markerOptions]="markerOptions"
   >
  </agm-direction>
</agm-map>

TS

import { Component, OnInit } from '@angular/core';

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

  public lat = 24.799448;
  public lng = 120.979021;

  public origin: any = null;
  public destination: any = null;
  public waypoints: any = null;
  public renderOptions = {};
  public markerOptions = {};

  ngOnInit() {
    this.origin = { lat: Number(this.lat), lng: Number(this.lng) };
    this.waypoints = [{ location: { lat: Number(24.7998516), lng: Number(120.97283) }, stopover: false, }];
    this.destination = { lat: Number(24.7992116), lng: Number(120.974784) };
    this.renderOptions = { polylineOptions: { strokeColor: '#0f0' }, suppressMarkers: true };
    this.markerOptions = {
      origin: { infoWindow: 'Origin', icon: 'http://i.imgur.com/7teZKif.png', },
      waypoints: [{ infoWindow: 'Restaurant', icon: 'http://i.imgur.com/7teZKif.png' }],
      destination: { infoWindow: 'Destination', icon: 'http://i.imgur.com/7teZKif.png', }
    };
  }
}

Screenshot image

Hope to help you!