Как получить маркеры широты и долготы для карты листовки из успокоительного API - PullRequest
Новая
       12

Как получить маркеры широты и долготы для карты листовки из успокоительного API

0 голосов
/ 20 декабря 2018

У меня есть карта с несколькими маркерами, и она отлично работает, когда я выбираю широту и долготу маркера из локальной таблицы, объявленной внутри класса.Затем я попытался получить координаты маркеров из успокоительного API, используя наблюдаемый, но у меня была ошибка неопределенного, я искал в Интернете, и я нашел подсказку, что это может быть связано с хуками жизненного цикла angular, но я не понял это правильно, потому что яm новое в машинописном и ионном 3 / Angular

это код поставщика: 

@Injectable()
    export class StationserviceProvider {

     private uri= 'http://127.0.0.1:8000/api/posts';

     constructor(public http: Http) {
     this.getPost();
     }
     getPost(): Observable<Post[]>{
      return  this.http.get(this.uri).map((res : Response) => { 
      return res.json().result.map(item => { 
       return new Post( 
        item.id,
        item.title,
        item.description,
        item.latitude,
        item.longitude
      );
      });
    });
   }
   }

это моя модель Класс 

export class Post {

  public id: number;
  public title: string;
  public description:string;
  public latitude: string ;
  public longitude: string ;

  constructor(id: number,  title: string,  description: string,  
  latitude: string ,  longitude: string ) {
  this.id = id;
  this.title = title;
  this.description = description;
  this.latitude=latitude;
  this.longitude=longitude;

   }

   }

это листовка сполучение координат маркеров из локальной таблицы 

    export class HomePage implements OnInit {
    @ViewChild('map') mapContainer: ElementRef;

    results:Post[];
    map: any;
    places = [
             ["station ",35.82450290000001,10.634584000000018],
             ["station ",35.5024461,11.045720999999958],
             ["station ",37.2767579,9.864160900000002]
             ];

   constructor(public navCtrl: NavController, public 
   Stc:StationserviceProvider) {}

    ngOnInit(){}

    ionViewDidEnter (){
    this.loadmap(); 
    }

    loadmap() {
    let  greenIcon = leaflet.icon({
     iconUrl: '../../img/school-bus.png',

     iconSize:     [30, 30], // size of the icon
     shadowSize:   [30, 30], // size of the shadow
     iconAnchor:   [22, 40], // point of the icon which will correspond 
     to marker's location
     shadowAnchor: [4, 20],  // the same for the shadow
     popupAnchor:  [-3,-50] // point from which the popup should open 
     relative to the iconAnchor
     });
     this.map = leaflet.map("map").fitWorld();

   leaflet.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
   {
   attributions: 'Map data &copy; <a 
   href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a 
   href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, 
   Imagery © <a href="http://mapbox.com">Mapbox</a>',
   maxZoom: 12
   }).addTo(this.map);
   this.map.locate({
   setView: true,
   maxZoom: 7
   }).on('locationfound', (e) => {
  let markerGroup = leaflet.featureGroup();
  let marker: any = leaflet.marker([e.latitude, e.longitude], {icon: 
   greenIcon}).addTo(this.map)
   .bindPopup('station ')
   .openPopup();
   markerGroup.addLayer(marker);
   this.map.addLayer(markerGroup);
    }).on('locationerror', (err) => {
    alert(err.message);
    })

    for ( var i = 0; i < this.places.length ; i++) {
    let marker:any = new leaflet.marker([this.places[i][1],this.places[i] 
     [2]], {icon: greenIcon})
    .bindPopup(this.places[i][0])
    .addTo(this.map);
    }
   }
   }

это код функции, в котором я подписываюсь на наблюдаемую и пытаюсь получить координаты маркеров из данных, но у меня появляется эта ошибка «не могу прочитать свойство undefined и undefined»

   loadData(){

   this.Stc.getPost().subscribe(data => {
   this.results= data
   console.log("the data:", this.results);
   console.log("the length:", this.results.length);
   console.log("latitude :",this.results[1].latitude);

   })
   }

Выходом Load.ata console.log являются данные: (3) [Post, Post, Post] и длина: 3 и широта: 37.2767579

Но когда я пытаюськ координатам маркера из результатов LoadData 

  for ( var i = 0; i < this.results.length ; i++) {
  let marker:any = new 
  leaflet.marker([this.results[i].latitude, this.results[i].longitude]
   , {icon: greenIcon})
    .bindPopup(this.results[i].title)
    .addTo(this.map);
    }

Я получил эти ошибки

Невозможно прочитать свойство 'длина' из неопределенного Невозможно прочитать свойство '0'of undefined Невозможно прочитать свойство' 1 'из undefined

Как правильно выбрать маркеры координат из API

...