Hola a tod@s.
Estoy intentando crear un mapa pero que según el id que traiga de la página anterior coge los datos de una db para crear dicho mapa. Cuando se visualiza por primera vez va todo perfecto, pero si vuelvo a la página anterior para seleccionar otro enlace (bien desde el menú o con el botón atrás), los siguientes mapas cogen las coordenadas 0,0. Los datos los coge bien de la db porque el nombre y el id aparecen correctamente en la página del mapa.
He intentado eliminar el mapa para que al volver a entrar lo cree de nuevo, pero sigue cogiendo las coordenadas 0,0. Lo he intentado con:
ionViewDidLeave() {
this.map.remove();
}
Os dejo el código por si podéis echarme una mano:
import { Component, OnInit, ViewChild } from '@angular/core';
import { Platform, NavController, LoadingController } from '@ionic/angular';
import { ActivatedRoute } from '@angular/router';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, LatLng, MarkerOptions, Marker, GoogleMapsMapTypeId } from "@ionic-native/google-maps";
import { mapStyle } from './mapStyle';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-vermapa',
templateUrl: './vermapa.page.html',
styleUrls: ['./vermapa.page.scss'],
})
export class VermapaPage implements OnInit {
id: any;
url = 'https://xxxxxxxxxxxx.xxx/getdatafromid.php?id=';
dataid: any;
public titulo: any;
public descripcion: any;
public direccion: any;
public telefono: any;
public imagen: any;
public logo: any;
public web: any;
public latitud: number;
public longitud: number;
style = mapStyle;
map: GoogleMap;
constructor(public platform: Platform, public navCtrl: NavController, private route: ActivatedRoute, private googlemapas: GoogleMaps, public http: HttpClient, public loadingController: LoadingController) {}
ngAfterViewInit() {
this.platform.ready().then(() => {
this.loadMap();
});
}
ionViewDidLeave() {
this.map.remove();
}
loadMap() {
let opciones: GoogleMapOptions = {
mapType: GoogleMapsMapTypeId.HYBRID,
controls: {
compass: false,
zoom: true,
myLocationButton: true,
myLocation: true
},
styles: this.style
};
let map = GoogleMaps.create('map_canvas_' + this.id, opciones);
map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
let coordinates: LatLng = new LatLng(this.latitud, this.longitud);
let position = {
target: coordinates,
zoom: 18
};
map.moveCamera(position);
let markerOptions: MarkerOptions = {
position: coordinates,
icon: "assets/mapa/bar.png",
title: this.titulo
};
const marker = map.addMarker(markerOptions)
.then((marker: Marker) => {
marker.showInfoWindow();
});
})
}
async getDataid() {
const loading = await this.loadingController.create({
message: 'Cargando...'
});
await loading.present();
this.http.get(this.url + this.id).subscribe(data => {
this.dataid = data;
loading.dismiss();
this.titulo = this.dataid[0].titulo;
this.descripcion = this.dataid[0].descripcion;
this.direccion = this.dataid[0].direccion;
this.telefono = this.dataid[0].telefono;
this.imagen = this.dataid[0].imagen;
this.logo = this.dataid[0].logo;
this.web = this.dataid[0].web;
this.latitud = this.dataid[0].latitud;
this.longitud = this.dataid[0].longitud;
})
}
ngOnInit() {
this.id = this.route.snapshot.paramMap.get('id');
this.getDataid();
}
}
Gracias y salu2.-