Angular 如何修复未定义的映射变量？

目前正在开发一款ionic 4移动应用程序，我必须添加一张地图与之交互。当我启动应用程序时，加载工作正常，但当我想用加载方法以外的其他方法与映射交互时，我的变量未定义

在本部分中，您将看到与问题相关的两个服务。 总之，当我启动应用程序时，我调用loadMap（）函数，然后调用addMarker（）方法

在这个方法中，我的变量映射是未定义的，我不明白为什么

这是调用addMarker（）方法的服务

从“@angular/core”导入{Injectable}；
从'@angular/Router'导入{Router}；
从“selenium webdriver/safari”导入{getRandomString}；
从'@ionic native/google maps'导入{Marker，MarkerOptions}；
从“/map.service”导入{MapService}；
const GlobalIcon='指南针'；
@注射的({
providedIn:'根'
})
出口类别指示服务{
公共索引：数组=[]；
构造函数（专用路由器：路由器，专用映射：映射服务）{}
阿胡特林迪奇（passedNote:any）{//Faire cet ajoutál'aide d'une promesse？？？
这是推({
标题：'Indice'+（this.indexs.length+1），
注：已过注，
图标：GlobalIcon，
id:this.index.length+1，
lat:this.getRandomInt（45,75），
液化天然气：这个。getRandomInt（4,5），
});
this.map.addMarker（this.index.length，this.index[this.index.length-1]。注意，this.index[this.index.length-1]。lat，this.index[this.index.length-1]。lng）；
this.router.navigate（['/home']）；
}
isIndiceIncluded（数据：任意）：布尔值{
返回this.index.find（x=>x.note==数据）！=未定义；
}
getRandomInt（最小值、最大值）：数字{
返回Math.random（）*（max-min+1）+min；
}
}

这是我的地图服务

从'@angular/core'导入{Injectable}；
进口{
谷歌地图，
谷歌地图，
谷歌地图服务公司，
谷歌地图选项，
摄像位置，
标记选项，
标记，
环境
}来自“@ionic native/google地图”；
@注射的({
providedIn:'根'
})
导出类映射服务{
私人地图：谷歌地图；
公共标记：数组=[]；
构造函数（）{}
loadMap（）{
让mapOptions:GoogleMapOptions={
摄像机：{
目标：{
拉脱维亚：43.783125，
液化天然气：2.809419
},
缩放：18，
倾斜：30
}
};
this.map=GoogleMaps.create（'map'，mapOptions）；
让marker:marker=this.map.addMarkerSync({
标题：“爱奥尼亚”，
图标：“红色”，
动画：“放下”，
职位：{
纬度：45.783125，
液化天然气：4.809419
},
});
/*marker.on（GoogleMapsEvent.marker_单击）。订阅（（）=>{
警报（“点击”）；
});*/
}
添加标记（id:编号，注释：任意，纬度：编号，液化天然气：编号）{
console.log（this.map）；//写入未定义
让currentMarker:Marker=this.map.addMarkerSync({
id:id，
标题：注，
图标：“红色”，
动画：“放下”，
职位：{
拉特：拉特，
液化天然气：液化天然气
},
});
this.markers.push（当前标记）；
}
}

---

提前感谢您的帮助，并对我的英语水平表示歉意。

平台准备好后，请尝试在地图服务中加载地图

constructor(private platform: Platform) {
    this.platform.ready().then(() => {
        this.loadMap();
    });
}

编辑：

这是一个为我工作的示例代码

import { AfterContentInit, Component, ViewChild } from '@angular/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterContentInit {
  @ViewChild('mapElement') mapElement;
  map:any;
  latitude: any = 22.454453;
  longitude: any = 88.389610;

  constructor() {}
  ngAfterContentInit(): void {
    const pos = { lat: this.latitude, lng: this.longitude };
    this.map = new google.maps.Map(
      this.mapElement.nativeElement, {
        center: { lat: this.latitude, lng: this.longitude }, zoom: 17
      });
    this.map.setCenter(pos);
    const marker = new google.maps.Marker({ 
        position: pos, /* marker position */ 
        map: this.map, /* map already created */ 
        title: 'Hello World!'});
    const  contentString = '<div id="content"><h1>Amitabh</h1><div id="bodyContent"><p>Is a good person, I must select his answer and upvote him</p></div>';

    const infowindow = new google.maps.InfoWindow({ 
        content: contentString, maxWidth: 400 });
    marker.addListener('click', function() { 
          infowindow.open(this.map, marker);
    });

  }
}

从'@angular/core'导入{AfterContentInit，Component，ViewChild}；
谷歌公司；
@组成部分({
选择器：“应用程序主页”，
templateUrl:'home.page.html'，
样式URL:['home.page.scss']，
})
导出类主页实现AfterContentInit{
@ViewChild（'mapElement'）mapElement；
地图：任何；
纬度：任意=22.454453；
经度：任意=88.389610；
构造函数（）{}
ngAfterContentInit（）：void{
const pos={lat:this.lation，lng:this.longitude}；
this.map=new google.maps.map(
this.mapeElement.nativeElement{
中心：{lat:this.lation，lng:this.longitude}，缩放：17
});
此.map.setCenter（pos）；
const marker=new google.maps.marker（{
位置：位置，/*标记位置*/
map:this.map，/*映射已创建*/
标题：“你好，世界！”）；
const contentString='阿弥陀佛是个好人，我必须选择他的答案并投票给他
'；
const infowindow=new google.maps.infowindow（{
内容：contentString，最大宽度：400}）；
marker.addListener（'click'，function（）{
infowindow.open（this.map，marker）；
});
}
}

希望这有助于使用ionic serve-col运行屏幕截图

---

平台准备好后，请尝试在地图服务中加载地图，好吗

constructor(private platform: Platform) {
    this.platform.ready().then(() => {
        this.loadMap();
    });
}

编辑：

这是一个为我工作的示例代码

import { AfterContentInit, Component, ViewChild } from '@angular/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements AfterContentInit {
  @ViewChild('mapElement') mapElement;
  map:any;
  latitude: any = 22.454453;
  longitude: any = 88.389610;

  constructor() {}
  ngAfterContentInit(): void {
    const pos = { lat: this.latitude, lng: this.longitude };
    this.map = new google.maps.Map(
      this.mapElement.nativeElement, {
        center: { lat: this.latitude, lng: this.longitude }, zoom: 17
      });
    this.map.setCenter(pos);
    const marker = new google.maps.Marker({ 
        position: pos, /* marker position */ 
        map: this.map, /* map already created */ 
        title: 'Hello World!'});
    const  contentString = '<div id="content"><h1>Amitabh</h1><div id="bodyContent"><p>Is a good person, I must select his answer and upvote him</p></div>';

    const infowindow = new google.maps.InfoWindow({ 
        content: contentString, maxWidth: 400 });
    marker.addListener('click', function() { 
          infowindow.open(this.map, marker);
    });

  }
}

从'@angular/core'导入{AfterContentInit，Component，ViewChild}；
谷歌公司；
@组成部分({
选择器：“应用程序主页”，
templateUrl:'home.page.html'，
样式URL:['home.page.scss']，
})
导出类主页实现AfterContentInit{
@ViewChild（'mapElement'）mapElement；
地图：任何；
纬度：任意=22.454453；
经度：任意=88.389610；
构造函数（）{}
ngAfterContentInit（）：void{
const pos={lat:this.lation，lng:this.longitude}；
this.map=new google.maps.map(
this.mapeElement.nativeElement{
中心：{lat:this.lation，lng:this.longitude}，缩放：17
});
此.map.setCenter（pos）；
const marker=new google.maps.marker（{
位置：位置，/*标记位置*/
map:this.map，/*映射已创建*/
标题：“你好，世界！”）；
const contentString='阿弥陀佛是个好人，我必须选择他的答案并投票给他
'；
const infowindow=new google.maps.infowindow（{
内容：contentString，最大宽度：400}）；
marker.addListener（'click'，function（）{
infowindow.open（this.map，marker）；
});
}
}

希望这有助于屏幕截图的运行