Javascript 如何在使用带有切换按钮的google maps API时修复Ionic NullInjectorError？

我有一个项目，我使用谷歌地图API和爱奥尼亚，我想创建一个切换，您可以在卫星视图和街景之间切换切换和关闭切换。这是我已经坚持了很长一段时间，我相信这个问题是由我导入搜索页面和使用地图的方式引起的，但任何反馈都将不胜感激

错误消息：

VM67048 vendor.js:62134 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SearchPageModule)[SearchPage -> SearchPage -> SearchPage -> SearchPage]: 
  NullInjectorError: No provider for SearchPage!
NullInjectorError: R3InjectorError(SearchPageModule)[SearchPage -> SearchPage -> SearchPage -> SearchPage]: 
  NullInjectorError: No provider for SearchPage!
    at NullInjector.get (VM58879 vendor.js:67026)
    at R3Injector.get (VM58879 vendor.js:67193)
    at R3Injector.get (VM58879 vendor.js:67193)
    at R3Injector.get (VM58879 vendor.js:67193)
    at NgModuleRef$1.get (VM58879 vendor.js:81247)
    at R3Injector.get (VM58879 vendor.js:67193)
    at NgModuleRef$1.get (VM58879 vendor.js:81247)
    at Object.get (VM58879 vendor.js:80961)
    at lookupTokenUsingModuleInjector (VM58879 vendor.js:59313)
    at getOrCreateInjectable (VM58879 vendor.js:59425)
    at resolvePromise (VM58874 polyfills.js:3445)
    at VM58874 polyfills.js:3352
    at rejected (VM58879 vendor.js:100902)
    at ZoneDelegate.invoke (VM58874 polyfills.js:3011)
    at Object.onInvoke (VM58879 vendor.js:84501)
    at ZoneDelegate.invoke (VM58874 polyfills.js:3010)
    at Zone.run (VM58874 polyfills.js:2770)
    at VM58874 polyfills.js:3504
    at ZoneDelegate.invokeTask (VM58874 polyfills.js:3046)
    at Object.onInvokeTask (VM58879 vendor.js:84488)

例如，下面是切换按钮（位于fab按钮内）的HTLM代码：

下面是searchpage的代码，它实际上包含api的所有代码并显示地图：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';


declare var google: any;

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {

  map: any;
  @ViewChild('map', {read: ElementRef, static: false}) mapRef: ElementRef;
  infoWindows: any = [];
  markers: any = [
    {
      title: "Building1",
      latitude: "33.646479464261766",
      longitude: "-117.84011195587281"
    }
  ];
  constructor() { }

  ngOnInit() {
  }
  ionViewDidEnter() {
    this.showMap();
  }

  addMarkersToMap(markers) {
    for (let marker of markers) {
      let position = new google.maps.LatLng(marker.latitude, marker.longitude);
      let mapMarker = new google.maps.Marker({
        position: position,
        title: marker.title,
        latitude: marker.latitude,
        longitude: marker.longitude
      });

      mapMarker.setMap(this.map);
      this.addInfoWindowToMarker(mapMarker);
    }
  }
  addInfoWindowToMarker(marker) {
    let infoWindowContent = '<div id="content">' +
                              '<h2 id="firstHeading" class"firstHeading">' + marker.title + '</h2>' +
                              '<p>Latitude: ' + marker.latitude + '</p>' +
                              '<p>Longitude: ' + marker.longitude + '</p>' +
                            '</div>';
    let infoWindow = new google.maps.infoWindow({
      content: infoWindowContent

    });

    marker.addListener('click', () => {
      this.closeAllInfoWindows();
      infoWindow.open(this.map, marker);
    });
    this.infoWindows.push(infoWindow);
  }

  closeAllInfoWindows() {
    for(let window of this.infoWindows) {
      window.close();
    }
  }

  showMap() {
    const location = new google.maps.LatLng(33.64601498874652, -117.84279416485856);
    const options = {
      center: location,
      zoom: 17,
      disableDefaultUI: true,
      mapTypeId: 'satellite'
    }
    this.map = new google.maps.Map(this.mapRef.nativeElement, options);
  }
  changeMap() {
    this.map.setMapTypeId('terrain');
    
  }



  
}

从'@angular/core'导入{Component，OnInit，ViewChild，ElementRef}；
声明：任何；
@组成部分({
选择器：“应用程序搜索”，
templateUrl:'./search.page.html'，
样式URL:['./search.page.scss']，
})
导出类SearchPage实现OnInit{
地图：任何；
@ViewChild（'map'，{read:ElementRef，static:false}）mapRef:ElementRef；
infoWindows:any=[]；
标记：任意=[
{
标题：“建筑1”，
纬度：“33.646479464261766”，
经度：“-117.84011195587281”
}
];
构造函数（）{}
恩戈尼尼特（）{
}
ionViewDidEnter（）{
这个.showMap（）；
}
addMarkersToMap（标记）{
for（让标记中的标记）{
让position=new google.maps.LatLng（marker.lation，marker.longitude）；
让mapMarker=new google.maps.Marker({
职位:职位,，
标题：marker.title，
纬度：马克，纬度，
经度：马克。经度
});
setMap（this.map）；
此.addInfo窗口标记器（mapMarker）；
}
}
AddInfo窗口标记器（标记器）{
让infoWindowContent=“”+
''+marker.title+''+
“纬度：”+marker.Latitude+“
”+
“经度：”+marker.Longitude+“
”+
'';
让infoWindow=new google.maps.infoWindow({
内容：infoWindowContent
});
marker.addListener（'单击'，（）=>{
此选项为：closeAllInfo窗口（）；
infoWindow.open（this.map，marker）；
});
this.infoWindows.push（infoWindow）；
}
closeAllInfo窗口（）{
for（让此.infoWindows的窗口打开）{
window.close（）；
}
}
showMap（）{
const location=new google.maps.LatLng（33.64601498874652，-117.842794164856）；
常量选项={
中心：位置，
缩放：17，
disableDefaultUI:true，
mapTypeId:'卫星'
}
this.map=new google.maps.map（this.mapRef.nativeElement，选项）；
}
changeMap（）{
this.map.setMapTypeId（'terrain'）；
}
}

SearchPage是一个组件，您正试图将其实例化为一个服务。那么如何访问文件外部的map变量呢@TEJESHREED取决于两个组件之间的关系。如果它们是直接相关的，您可以使用输入/输出，否则您可以在服务中设置一些可以在它们之间共享的属性，并从您的组件获取它

import { Component, OnInit } from '@angular/core';

import {SearchPage} from "../search/search.page"
@Component({
selector: 'app-accessibility-popover',
templateUrl: './accessibility-popover.component.html',
styleUrls: ['./accessibility-popover.component.scss'],
})
export class AccessibilityPopoverComponent implements OnInit {

constructor(private searchpage: SearchPage) { }

ngOnInit() {}


update(event)
{
  if (event.detail.checked == true)
  {
     searchpage.Test.map.setMapTypeId('terrain');

  }
  console.log(event.detail.checked);
}

 }

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';


declare var google: any;

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {

  map: any;
  @ViewChild('map', {read: ElementRef, static: false}) mapRef: ElementRef;
  infoWindows: any = [];
  markers: any = [
    {
      title: "Building1",
      latitude: "33.646479464261766",
      longitude: "-117.84011195587281"
    }
  ];
  constructor() { }

  ngOnInit() {
  }
  ionViewDidEnter() {
    this.showMap();
  }

  addMarkersToMap(markers) {
    for (let marker of markers) {
      let position = new google.maps.LatLng(marker.latitude, marker.longitude);
      let mapMarker = new google.maps.Marker({
        position: position,
        title: marker.title,
        latitude: marker.latitude,
        longitude: marker.longitude
      });

      mapMarker.setMap(this.map);
      this.addInfoWindowToMarker(mapMarker);
    }
  }
  addInfoWindowToMarker(marker) {
    let infoWindowContent = '<div id="content">' +
                              '<h2 id="firstHeading" class"firstHeading">' + marker.title + '</h2>' +
                              '<p>Latitude: ' + marker.latitude + '</p>' +
                              '<p>Longitude: ' + marker.longitude + '</p>' +
                            '</div>';
    let infoWindow = new google.maps.infoWindow({
      content: infoWindowContent

    });

    marker.addListener('click', () => {
      this.closeAllInfoWindows();
      infoWindow.open(this.map, marker);
    });
    this.infoWindows.push(infoWindow);
  }

  closeAllInfoWindows() {
    for(let window of this.infoWindows) {
      window.close();
    }
  }

  showMap() {
    const location = new google.maps.LatLng(33.64601498874652, -117.84279416485856);
    const options = {
      center: location,
      zoom: 17,
      disableDefaultUI: true,
      mapTypeId: 'satellite'
    }
    this.map = new google.maps.Map(this.mapRef.nativeElement, options);
  }
  changeMap() {
    this.map.setMapTypeId('terrain');
    
  }



  
}