Using direction service google maps no ionic 3

0

I'm trying to use directionService to plot a polyline from a point A to B on the map.

I follow the following steps.

First I create the map using the plugin @ ionic-native / google-maps .

 let mapOptions: GoogleMapOptions = {
 camera: {
    target: {
      lat: 0,
      lng: 0
    },
    zoom: 16, //14
    bearing: 0
 },
 controls: {
   compass: true,
   myLocationButton: true,
   mapToolbar: false
 },
 gestures: {
   scroll: true,
   tilt: true,
   rotate: false,
   zoom: true
 },
 };
 this.message = 'map_is_ready';
 let mapElement: HTMLElement = document.getElementById('map');
 this.map = GoogleMaps.create(mapElement, mapOptions);
 this.map.setVisible(true);

After that I get some points that plot on the map, when it is clicked at these points I execute the function that should plot the path of mine to the point where I created it. The function looks like this:

setPolylineDirectionMyAndPoint(start, end) {
  const request = { // Novo objeto google.maps.DirectionsRequest, contendo:
    origin: start, // origem
    destination: end, // destino
    travelMode: google.maps.TravelMode.WALKING // meio de transporte, nesse caso, apé
  };

  this.directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      const plyPath = [];
      const legs = result.routes[0].legs;
      for (let i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (let j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (let k = 0; k < nextSegment.length; k++) {
            plyPath.push(nextSegment[k]);
          }
        }
      }
      const polyline = new google.maps.Polyline({
        path: plyPath,
        strokeColor: '#0032e9',
        strokeWeight: 8
      });
    }
  });
}

I made this attempt and also tried to create by the plugin itself:

let polylineOptions = {
  points: plyPath,
  'color': '#0032e9',
  'width': 8,
  'geodesic': true,
};
this.map.addPolyline(polylineOptions).then((polyline: Polyline) => {
});

But it gives an error saying that addPolyline is not a function, I create several polylines and everything works perfectly, but for this it does not work correctly. I know that by the plugin itself I can not do it however I'm trying to get the points and myself to set these points on the map.

How to solve this problem? I need the path from me to the point where I clicked.

    
asked by anonymous 12.03.2018 / 14:26

0 answers