Question

我正在开始一个新的Ionic 2项目，我正在使用谷歌地图标记。

这是andalucia-mapa.ts的代码：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, NavParams,  Platform  } from 'ionic-angular';
import { GoogleMaps } from '../../providers/google-maps';
import { Geolocation } from 'ionic-native';
import { Locations } from '../../providers/locations';
declare var google;
/*
  Generated class for the AndaluciaMapa page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-andalucia-mapa',
  templateUrl: 'andalucia-mapa.html'
})
export class AndaluciaMapaPage {

   @ViewChild('map') mapElement: ElementRef;
  @ViewChild('pleaseConnect') pleaseConnect: ElementRef;

  constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations) {

  }

  ionViewDidLoad(){

    this.platform.ready().then(() => {

        let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement);

         let locationsLoaded = this.locations.load();

            Promise.all([
                mapLoaded,
                locationsLoaded
            ]).then((result) => {

                let locations = result[1];

                for(let location of locations){
                    this.maps.addMarker(location.latitude, location.longitude);
                }

            });

        });

    }


}

第一次执行页面时，标记会显示在地图上。但是如果我回到另一个页面并返回到此页面，则标记不会加载。

修改

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, NavParams,  Platform  } from 'ionic-angular';
import { GoogleMaps } from '../../providers/google-maps';
import { Geolocation } from 'ionic-native';
import { Locations } from '../../providers/locations';
declare var google;
/*
  Generated class for the AndaluciaMapa page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-andalucia-mapa',
  templateUrl: 'andalucia-mapa.html'
})
export class AndaluciaMapaPage {

   @ViewChild('map') mapElement: ElementRef;
  @ViewChild('pleaseConnect') pleaseConnect: ElementRef;
 locations:any;//declare locations

  constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations) {

  }

  ionViewDidLoad(){

    this.platform.ready().then(() => {

        let mapLoaded = this.maps.init(this.mapElement.nativeElement, this.pleaseConnect.nativeElement);

         let locationsLoaded = this.locations.load();
 console.log("location",locationsLoaded);
            Promise.all([
                mapLoaded,
                locationsLoaded
            ]).then((result) => {

               this.locations = result[1];

                for(let location of this.locations){
                    this.maps.addMarker(location.latitude, location.longitude);
                }

            });

        });

    }


}

Answer 1

将您的代码放入

  ionViewDidEnter(){
    //put your code here
    }
    ionViewDidLoad(){
}

页面加载后运行。此事件仅在每个页面创建时发生一次。

Answer 2

您已将位置数组设置为then函数的本地数组。仅在第一次创建页面时调用ionViewDidLoad 。将您的位置数组设置为类变量，它应该可以工作。

export class AndaluciaMapaPage {

   @ViewChild('map') mapElement: ElementRef;
  @ViewChild('pleaseConnect') pleaseConnect: ElementRef;

locationCorodinates:any;//declare locations

  constructor(public navCtrl: NavController, public maps: GoogleMaps, public platform: Platform, public locations: Locations) {

  }

...

在promise.all中，

 Promise.all([
                mapLoaded,
                locationsLoaded
            ]).then((result) => {

                this.locationCorodinates= result[1];//remove declaration

                for(let location of this.locationCorodinates){
                    this.maps.addMarker(location.latitude, location.longitude);
                }

和ionViewWillEnter

ionViewWillEnter(){
for(let location of this.locationCorodinates){
                        this.maps.addMarker(location.latitude, location.longitude);
}

Answer 3

而不是ionViewDidLoad尝试使用ionViewWillEnter。它肯定会解决你的问题。

离子2，标记只出现一次

3 个答案: