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.