Hello, I’m doing an app for android and I’m trying to caluclate routes while watching a position, the problem is that when it recalculates the route it refreshes the whole map. I’d like to just move the markers recalculating the distances and the route map without recharging it. Is there any way?
Here is the .ts:
options = {
enableHighAccuracy: true,
timeout: 10000
};
bool: boolean=false;
map: any;
directionsService: any = null;
directionsDisplay: any = null;
bounds: any = null;
myLatLng: any;
waypoints = [];
desti;
ruta;
constructor(public navCtrl: NavController, public navParams: NavParams,
public geolocation: Geolocation) {
this.directionsService = new google.maps.DirectionsService();
this.directionsDisplay = new google.maps.DirectionsRenderer();
this.bounds = new google.maps.LatLngBounds();
this.ruta=navParams.data;
}
ionViewDidLoad() {
this.cargaPuntos();
}
cargaPuntos(){
for (let i = 0; i < this.ruta.length-2; i++) {
let lati=this.ruta[i].lat;
let longi=this.ruta[i].long;
this.waypoints.push( {location:{lat:lati,lng:longi}, stopover: true});
}
this.getPosition();
}
getPosition():any{
let lati=this.ruta[this.ruta.length-1].lat;
let longi=this.ruta[this.ruta.length-1].long;
this.desti={ lat:lati , lng:longi };
let watch = this.geolocation.watchPosition();
watch.subscribe((data) => {
this.loadMap(data);
});
}
loadMap(position: Geoposition){
let latitude = position.coords.latitude;
let longitude = position.coords.longitude;
// create a new map by passing HTMLElement
let mapEle: HTMLElement = document.getElementById('map');
document.getElementById('borrar').innerHTML="";
document.getElementById('borrar').innerHTML="<div padding-horizontal id='panel'></div>";
let panelEle: HTMLElement = document.getElementById('panel');
// create LatLng object
this.myLatLng = {lat: latitude, lng: longitude};
// create map
this.map = new google.maps.Map(mapEle, {
center: this.myLatLng,
zoom: 14
});
this.directionsDisplay.setMap(this.map);
this.directionsDisplay.setPanel(panelEle);
google.maps.event.addListenerOnce(this.map, 'idle', () => {
mapEle.classList.add('show-map');
this.calculateRoute();
});
}
private calculateRoute(){
this.bounds.extend(this.myLatLng);
this.waypoints.forEach(waypoint => {
var point = new google.maps.LatLng(waypoint.location.lat, waypoint.location.lng);
this.bounds.extend(point);
});
this.map.fitBounds(this.bounds);
this.directionsService.route({
origin: new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng),
destination: new google.maps.LatLng(this.desti),
// destination: new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng),
waypoints: this.waypoints,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.WALKING,
avoidTolls: true
}, (response, status)=> {
if(status === google.maps.DirectionsStatus.OK) {
this.directionsDisplay.setDirections(response);
}else{
alert('Could not display directions due to: ' + status);
}
});
}