【问题标题】:Map Freeze After Changing Tab in Ionic在 Ionic 中更改选项卡后地图冻结
【发布时间】:2018-11-01 21:54:06
【问题描述】:

我在我的 ionic 应用程序中使用标签页,起初我的地图不会在我切换到另一个标签页然后再次返回地图页时显示。然后我在互联网上找到了解决方法,当我切换到另一个选项卡后,我的地图确实再次出现了。但问题是现在地图冻结了,我无法拖动、移动或缩放我的地图。这是我显示地图的代码。

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 @ViewChild('map') mapelement : ElementRef;
 map : GoogleMap;
 initialMapLoad: boolean = true;
  constructor(public navCtrl: NavController, private _googlemap : GoogleMaps, 
    private _geolocation : Geolocation) {

  }
  ionViewDidLoad(){

    this.initMap();

  }


  initMap(){
    let element = this.mapelement.nativeElement;
    this.getlocation().then(res => {
      let loc = new LatLng(res.coords.latitude, res.coords.longitude);
      this.map = this._googlemap.create('map', {      
        camera:{
          target: loc,
          zoom: 15
        }

      });
      this.createmarker(loc, 'Me');
    }).catch (err => {
       console.log(err);
    });


  }
  ionViewDidEnter(){
    if (!this.initialMapLoad) {
      this.map.setDiv('map');
    } else {
      this.initialMapLoad = false;
    }
  }
  getlocation(){
    return this._geolocation.getCurrentPosition();
  }
  movecamer(loc : LatLng){
   let options : CameraPosition<LatLng> ={
     target: loc,
     zoom: 15,
     tilt: 10
   }
   this.map.moveCamera(options)
  }
  createmarker(loc: LatLng, title : string){
    let markeroptions : MarkerOptions = {
        position : loc,
        title : title
    }
    return this.map.addMarker(markeroptions);
  }

}

谁能帮帮我?并告诉我这里出了什么问题。

为什么地图被冻结而我无法移动地图?谢谢

【问题讨论】:

    标签: angular google-maps ionic-framework ionic3 ionic-native


    【解决方案1】:

    我通过删除 watchPosition 事件解决了这个问题,只需在 promise 中调用 getCurrentPosition 事件即可解决标签卡死问题。

    this.geolocation.getCurrentPosition().then((resp) => {
     // resp.coords.latitude
     // resp.coords.longitude
    }).catch((error) => {
      console.log('Error getting location', error);
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多