0

la cuestión es que obtengo unos datos desde una petición get, y de esos datos tengo que sacar la posición y tal para crear unos marcadores y añadirlos al mapa, pero no se como hacerlo para que los datos estén disponibles al cargar el mapa, ya que en el 'for' del 'loadmap' no puedo usar 'length' he compprobado con 'console.log(this.datos) en el 'loadmap' y me dice undefined, aunque en el 'getDatos' console.log(this.datos)) muestra el array de objetos correctamente.

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import {
     GoogleMaps,
     GoogleMap,
     GoogleMapsEvent,
     LatLng,
     CameraPosition,
     MarkerOptions,
     Marker
    } from '@ionic-native/google-maps';

    import { Geolocation } from '@ionic-native/geolocation';

    import {obtenerJsonService} from '../../services/obtenerJson';

    declare var google;
    declare var map;

    @Component({
      selector: 'page-home',
      templateUrl: 'home.html',
      providers: [obtenerJsonService]
    })
    export class HomePage{
        datos: any;

      constructor(public navCtrl: NavController, private googleMaps:                         GoogleMaps, private geolocation:Geolocation, private         jsonService:obtenerJsonService) {
      }

       ngOnInit(){
       this.getDatos();
        this.loadMap
       }


    loadMap() {

let element: HTMLElement = document.getElementById('map');

let map: GoogleMap = this.googleMaps.create(element);

map.one(GoogleMapsEvent.MAP_READY).then(() => console.log('Map is ready!'));


let ionic: LatLng = new LatLng(24.434234, -3.9965);
let position: CameraPosition = {
    target: ionic,
    zoom: 13,
    tilt: 30
    };
map.moveCamera(position);

let io: LatLng = new LatLng(17.3849919, -2.973834000000099);    
let markerOptions: MarkerOptions = {
    position: io,
    title: 'Titulo'
    };
map.addMarker(markerOptions).then((marker: Marker) => {
    marker.showInfoWindow();
    });


    //aqui cargaría los datos recibidos del Json como marcadores
    for(var p=0; p<datos.length; p++){
let io: LatLng = new LatLng(datos[p].latitud, datos[p].longitud);
console.log(datos[p].titulo);   
let markerOptions: MarkerOptions = {
    position: io,
    title: datos[p].titulo
    };
map.addMarker(markerOptions).then((marker: Marker) => {
    marker.showInfoWindow();
    });
}

     }

     getDatos(){
        this.jsonService.getDatos().subscribe(
            data =>{
                this.datos =data.json();
                (console.log(this.datos))//aqui muestra correctamente los datos leidos
                },
                err => console.error(err),
                ()=> console.log('Datos Cargados')
                );

                }

2 respuestas 2

0

Podrías intentar usando Promises al importar tu servicio.

Por ejemplo en tu archivo obtenerJsonService creas el Promise.

getDatos(): Promise<any>{
//tu petición aquí

     return Promise.resolve(data.json());
);

Y en tu ngOnInit de tu HomePage

 datos: obtenerJsonService;

 ngOnInit(): Promise<any> {

      return this.datos
        .getDatos()
        .then(data => {
          // Opcion 1: pasar params a loadMap
          // Opcion 2: crear una variable.

           this.loadMap(params.data)
        });
    }

Espero te sirva.

0

Se pueden hacer asíncronas las funciones getDatos() y loadMap() y que getDatos() retorne una promesa para llamarla dentro de la función loadMap() de forma secuencial. De esa forma no se interrumpe la carga del mapa mientras se espera a que los datos estén listos.

async loadMap() {
  let element: HTMLElement = document.getElementById("map");

  let map: GoogleMap = this.googleMaps.create(element);

  map.one(GoogleMapsEvent.MAP_READY).then(() => console.log("Map is ready!"));

  let ionic: LatLng = new LatLng(24.434234, -3.9965);
  let position: CameraPosition = {
    target: ionic,
    zoom: 13,
    tilt: 30,
  };
  map.moveCamera(position);

  let io: LatLng = new LatLng(17.3849919, -2.973834000000099);
  let markerOptions: MarkerOptions = {
    position: io,
    title: "Titulo",
  };
  map.addMarker(markerOptions).then((marker: Marker) => {
    marker.showInfoWindow();
  });
  // aquí se espera a que los datos estén listos
  // en este punto el mapa ya cargó
  await getDatos();

  //aqui cargaría los datos recibidos del Json como marcadores
  for (var p = 0; p < datos.length; p++) {
    let io: LatLng = new LatLng(datos[p].latitud, datos[p].longitud);
    console.log(datos[p].titulo);
    let markerOptions: MarkerOptions = {
      position: io,
      title: datos[p].titulo,
    };
    map.addMarker(markerOptions).then((marker: Marker) => {
      marker.showInfoWindow();
    });
  }
}

Función getDatos() con promesa:

async getDatos() {
  // se ejecuta la petición dentro de una promesa
  // cuando la petición finalice se notifica que la operación finalizó
  // llamando a resolve()
  return new Promise((resolve, reject) => {
    this.jsonService.getDatos().subscribe(
      (data) => {
        this.datos = data.json();
        resolve();
      },
      (err) => reject(),
      () => console.log("Datos Cargados")
    );
  });
}

Y en en el ngOnInit() solo llama la función loadMap():

ngOnInit(){
    this.loadMap();
 }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.