位置未定义的Ionic 4地理位置

Question

当我尝试在页面上显示地图时出现错误，我认为是因为我使用了ionic 4，并且试图通过一个版本更高的应用程序传递代码

控制台给我下一个错误（如图）

我尝试在AVD仿真器中运行该应用程序，该软件是带有Cordova和离子服务的fisic设备，但是地图在任何地方都没有显示

那是我的代码：

constructor(public afAuth:AngularFireAuth, public geolocation:Geolocation) {

}

ngAfterViewInit() {
    this.getPosition();
}

getPosition():any {
    this.geolocation.getCurrentPosition().then(response => {
       this.loadMap(response);
    }).catch(error => {
      console.log(error);
    });
}


loadMap(position: Geoposition) {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
    console.log(this.latitude, this.longitude);

    // create a new map by passing HTMLElement
    const mapEle: HTMLElement = document.getElementById('map');

    // create LatLng object
    const myLatLng = {lat: this.latitude, lng: this.longitude};

    // create map
    this.map = new google.maps.Map(mapEle, {
      center: myLatLng,
      zoom: 12
    });

    google.maps.event.addListenerOnce(this.map, 'idle', () => {
        const marker = new google.maps.Marker({
          position: myLatLng,
          map: this.map,
          title: 'AQUI ESTOY!'
        });
        mapEle.classList.add('show-map');
    });
}

这是控制台显示的错误：

25.7280391 -100.3622132 ingresar.page.ts:47:4
TypeError: "a is null"
Ge (index):71
eh (index):110
loadMap ingresar.page.ts:56
getPosition ingresar.page.ts:36
Angular 10
ingresar.page.ts:39:6
ERROR TypeError: "position is undefined"
loadMap ingresar.page.ts:45
View_IngresarPage_5 IngresarPage.html:27
Angular 13
IngresarPage.html:27:4
View_IngresarPage_5 IngresarPage.html:27
Angular 12
ERROR CONTEXT 
Object { view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView:       

{…} }
IngresarPage.html:27:4