Angular：谷歌地图第一次工作，然后只在移动屏幕上空白

Posted 2023-03-16

【中文标题】Angular：谷歌地图第一次工作，然后只在移动屏幕上空白

【英文标题】：Angular: google maps works first time then blank on mobile screens only

【发布时间】：2020-05-26 04:50:12

【问题描述】：

我正在使用 ionic/angular 构建一个移动应用程序我创建的页面有一个谷歌地图，在第一次加载/访问时可以正常工作，但是当再次导航到地图页面时，地图变为空白或不呈现！

此问题仅发生在移动设备尺寸上！如果我确实触摸或单击了任何地方，则可以再次工作，但不能像屏幕截图所示那样初始化。

这是stackblitzhttps://stackblitz.com/edit/ionic-4-angular-8-start-template-xx3btx?file=src%2Fapp%2Ftab2%2Ftab2.page.ts

只需点击主页上的按钮click here，您将看到第一次运行良好，因此只需通过标题下方的按钮导航回来（不要使用返回stackblitz ) 然后再次转到该页面，您将看到地图全为空白。

控制台上没有显示错误；

我的代码：

@ViewChild('map',  static: true ) mapElement: ElementRef;
map: any;

activeLocation: any;

ngOnInit() 
  this.loadMap();

loadMap() 

    this.loadingService.present('Loading, please wait...');

    let latLng = new google.maps.LatLng(29.2865163, 47.9916857);

    let mapOptions = 
      center: latLng,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    var marker, i;
    let th = this;

    google.maps.event.addListenerOnce(this.map, 'resize', function () 
      google.maps.event.trigger(this.map, 'resize');
    );

    this.wooService.kefanBranchesLocations().then(
      locations => 

        this.loadingService.dismiss();
        for (i = 0; i < locations.length; i++) 
          marker = new google.maps.Marker(
            position: new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']),
            animation: google.maps.Animation.DROP,
            map: this.map
          );

          google.maps.event.addListener(marker, 'click', (function (marker, i) 
            return function () 
              th.activeLocation = locations[i];
              th.activeLocation['open_hours'] = typeof th.activeLocation['open_hours'] == 'string' ? JSON.parse(th.activeLocation['open_hours']) : th.activeLocation['open_hours'];
              console.log(th.activeLocation);
            
          )(marker, i));
        
      
    );
  

HTML：

<div #map id="map"></div>

CSS：

#map 
    position: absolute;
    width: 100%;
    height: 100%;

截图：

【问题讨论】：

在浏览器的控制台日志中查找错误消息。 （“开发者屏幕。”）

完全没有错误；这只发生在手机屏幕尺寸上！！

我注意到您的示例代码包含您的 API 密钥。请注意，最好将您的 API 密钥保密，并且在共享示例代码时，请确保按照 developers.google.com/maps/…

正确限制它们

【参考方案1】：

您应该实现AfterContentInit 并将您的代码从ngOnInit() 移动到ngAfterContentInit()。

Angular 不会在初始化阶段创建地图元素。您需要在页面生命周期的后期进行检查。

查看官方文档了解更多信息：https://angular.io/guide/lifecycle-hooks。

【讨论】：

我在AfterContentInit 和AfterViewInit 上进行了测试，至少OnInit 都是一样的，地图第一次开始工作，然后只是空白，控制台或终端上没有错误，所以我我不是在比赛，更奇怪的是它只发生在手机屏幕上，如果我触摸屏幕并移动地图，就像上面的 gif 一样再次工作和重新渲染

你在使用 OnPush 变更检测吗？

我不知道 OnPush 是什么，所以我想我不是！让我更困惑的是，如果我只激活移动模式，这个问题只发生在移动设备上或浏览器上，所以如果我只是将浏览器调整为任何大小，工作正常，

如果在 ngOnInit() 中在 this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 之前添加 console.log(this.mapElement.nativeElement) 会发生什么？它存在吗？如果您在移动设备上并且无法访问开发工具，您可以随时尝试在屏幕上打印一些内容以调试该元素的存在。

你能提供一个简单的 stackblitz 来重现这个问题吗？