谷歌地图不显示在手机上

Question

大家好，我正在使用meteor-google-map。我可以在桌面上看到它们，但在移动设备上看不到它们。谁能告诉我我做错了什么？在移动设备上，地图容器全是空白的。这是一张图片

地图未出现

如果我必须将域列入白名单，那么有人可以告诉我如何将谷歌地图列入白名单，因为从文档中

允许使用 tel:、geo:、mailto:、sms:、market:* 并从外部启动（手机应用程序或 Android 上的电子邮件客户端）

我认为谷歌地图是允许的

这是谷歌地图代码

index.html

  <div class="map-container">
    {{> googleMap name="exampleMap" options=exampleMapOptions}}
  </div>

index.js

    exampleMapOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(Meteor.user().profile.latitude, Meteor.user().profile.longitude),
        zoom: 13
      };
    }
  }

Template.body.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('exampleMap', function(map) {
    // Add a marker to the map once it's ready
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });
  });
});

更新

我发现我收到错误未捕获的引用错误：谷歌未定义

所以我尝试了白名单，但它不起作用

> App.info({   id: 'com.example.matt.uber',   
>name: 'MedCircle',  
> description: 'Get über power in one button click',   
>author: 'Matt
> Development Group',   
>email: '[email protected]',   
>website: 'http://example.com' 
>}); 
> 
> App.setPreference('BackgroundColor', '0xff0000ff');
> App.setPreference('HideKeyboardFormAccessoryBar', true);
> App.setPreference('Orientation', 'default');
> 
> 
> // App.accessRule('*.googleapis.com'); 
> //App.accessRule('*.gstatic.com'); 
>// App.accessRule('*.google.com'); //
>// App.accessRule('maps.googleapis.com'); 
>// App.accessRule('maps.gstatic.com'); 
>// App.accessRule('mt0.googleapis.com'); 
>// App.accessRule('mt1.googleapis.com'); 
>// App.accessRule('csi.gstatic.com');
> 
> 
> // <access origin="*://*.googleapis.com/*" subdomains="true" /> 
> //<access origin="*://*.gstatic.com/*" subdomains="true" /> 
> // <accessorigin="*://*.google.com/*" subdomains="true" /> 
> // <accessorigin="*://*.googleusercontent.com/*" subdomains="true" />
> 
> App.accessRule('*');

Answer 1

我发现我必须允许这些

App.accessRule('http://*');
App.accessRule('https://*');

Answer 2

 <ion-header>
  <ion-toolbar color="primary">
    <ion-title>Détails de l'Alerte</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="closeModal()" color="light">
        <ion-icon name="close-circle"></ion-icon>
        Fermer
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  <!-- Carte Google Maps -->
  <div #map id="map-container"></div>
</ion-content>

body {
  background: transparent;
}
ion-content {
  --background: transparent;
}

index.css

    body {
  background: transparent;
}
ion-content {
  --background: transparent;
}
 #map-container {
  height: 100%; /* La carte prend toute la hauteur de la page */
  width: 100%; /* La carte prend toute la largeur de la page */
}