Question

我有这个提供者：

import {Injectable} from '@angular/core';
import {CommonService} from "./common-service";
import { Storage } from '@ionic/storage';

import 'rxjs/add/operator/filter';

declare var google;

@Injectable()
export class Maps{
   load_map(selector:any,zoom:number,center_coords:any = {lat: this.lat ,lng: this.lng}){


    this.lat = center_coords.lat;
    this.lng = center_coords.lng;

    return new Promise((resolve,reject) => {
        let latLng = new google.maps.LatLng(center_coords.lat, center_coords.lng);

        let mapOptions = {zoom: zoom};
      this.map = new google.maps.Map(selector, mapOptions);

      if(this.map){

        return resolve(this.map);
      }else{
        return reject({error:"can not load maps"});
      }

    })

  }

 set_center(lat :number = this.lat,lng :number = this.lng){
     let latLng = new google.maps.LatLng(lat, lng);
     this.map.setCenter(latLng);
  }
}

我在我的app模块中使用工厂：

{
   provide: 'Maps', 
   useFactory: () => 
      new Maps(), 
     deps: []
},

在我的页面中，我导入服务：

@Component({
  selector: 'page-report',
  templateUrl: 'report.html'
})

export class ReportPage{
 public map:any;
 @ViewChild('reportmap') mapElement :ElementRef;

   construct(@Inject('Maps') mapsfactory){
      this.map = mapsfactory;//this is a new instance always 
      this.map.load_map(mapElement,16,{lat:123,lng:123});
      this.map.set_center(234,234);
   }
}

其他页面：

 @Component({
      selector: 'other-page',
      templateUrl: 'other-page.html'
    })

    export class OtherPage{
     public map:any;
     @ViewChild('map') mapElement :ElementRef;//diferent input

       construct(@Inject('Maps') mapsfactory){
          this.map = mapsfactory;
          this.map.load_map(mapElement,16,{lat:123,lng:123});
       }
    }

在app init工作正常，但是如果使用点击或其他事件更改第二个实例中的中心（OtherPage）将中心影响更改为ReportPage地图，我尝试将中心重置为原始位置但不能正确渲染，请使用工厂创建两个不同的地图实例但不起作用，此问题仅在更改地图中心时出现。 elementRef是diferents id和input属性，实例之间都是不同的！在浏览器上没关系，这个问题只出现在Android设备中，我使用角度2和离子2的新手，我认为android通过创建单个实例优化地图，任何想法或类似问题一起解决？我认为在一个糟糕的解决方案但我无法做到;在选项卡1（otherPage）中完成工作后重新加载选项卡0（reportpage），并在单击选项卡0后重新加载。

离子2，应用程序冲突中的两张地图

0 个答案: