Hi,
I’m doing about choosing a route in the map, clicking on a route and having problems.
my code`
import { Component, ViewChild, ElementRef } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation’;
declare var google: any;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
latlng: any;
map: any;
directionsService;
directionsDisplay;
trafficLayer;
@ViewChild(‘map’) mapElement;
polylines = ;
constructor(public navCtrl: NavController, private geolocation: Geolocation) {
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad HomePage’);
this.loadMap();
}
loadMap() {
this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
this.latlng = resp.coords.latitude + ',' + resp.coords.longitude;
let A = { lat: 13.775982, lng: 100.508975 };
let B = { lat: 13.746623, lng: 100.524211 };
this.map = new google.maps.Map(document.getElementById('map'), {
center: { lat: resp.coords.latitude, lng: resp.coords.longitude },
zoom: 30,
mapTypeId: 'terrain'
});
this.directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true, suppressMarkers: true });
this.directionsDisplay.setMap(this.map);
this.trafficLayer = new google.maps.TrafficLayer();
this.trafficLayer.setMap(this.map);
this.directionsService = new google.maps.DirectionsService();
google.maps.Polyline.prototype.getBounds = function(startBounds) {
if(startBounds) {
var bounds = startBounds;
}
else {
var bounds = new google.maps.LatLngBounds();
}
this.getPath().forEach(function(item, index) {
bounds.extend(new google.maps.LatLng(item.lat(), item.lng()));
});
return bounds;
};
var icons = {
start: new google.maps.MarkerImage(
// URL
'assets/imgs/ice.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32)
),
end: new google.maps.MarkerImage(
// URL
'assets/imgs/ice.png',
// (width,height)
new google.maps.Size(44, 32),
// The origin point (x,y)
new google.maps.Point(0, 0),
// The anchor point (x,y)
new google.maps.Point(22, 32)
)
};
this.directionsService.route({
origin: A,
destination: B,
optimizeWaypoints: true,
travelMode: 'DRIVING',
provideRouteAlternatives: true,
unitSystem: google.maps.UnitSystem.METRIC,
drivingOptions: {
departureTime: new Date(Date.now()), // for the time N milliseconds from now.
trafficModel: 'optimistic'
}
}, (response, status) => {
if (status == google.maps.DirectionsStatus.OK) {
var bounds = new google.maps.LatLngBounds();
// draw the lines in reverse orde, so the first one is on top (z-index)
for(var i=response.routes.length - 1; i>=0; i-- ) {
// let's make the first suggestion highlighted;
if(i==0) {
var color = '#0000ff';
}
else {
var color = '#999999';
}
var line = this.drawPolyline(response.routes[i].overview_path, color);
this.polylines.push(line);
bounds = line.getBounds(bounds);
google.maps.event.addListener(line, 'click', function() {
// detect which route was clicked on
var index = this.polylines.indexOf(this);
this.highlightRoute(index);
});
}
this.map.fitBounds(bounds);
} else {
console.log('Directions request failed due to ' + status);
}
});
});/////
};
makeMarker(position, icon, title) {
new google.maps.Marker({
position: position,
map: this.map,
icons: icon,
title: title
});
}
highlightRoute(index) {
for(var j in this.polylines ) {
if(j==index) {
var color = ‘#0000ff’;
}
else {
var color = ‘#999999’;
}
this.polylines[j].setOptions({strokeColor: color});
}
}
drawPolyline(path, color) {
var line = new google.maps.Polyline({
path: path,
strokeColor: color,
strokeOpacity: 0.7,
strokeWeight: 5
});
line.setMap(this.map);
return line;
}
}
How can I correct this error?