Question

我有一个非常奇怪的问题，大约一个星期前开始发生。

我有一个ionic v1应用程序，该应用程序使用Google地图（不是cordova插件，而是Google版本的网络版本），并且这些地图以模式打开，并且一直有效（至少两年）。 / p>

我当前拥有的JS代码如下

$scope.pickup_map = {
    center: item.location,
    zoom: 14,
    control: pickupMapControl,
    mapOptions: {
        draggable: true,
        disableDefaultUI: true,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    }
}

然后在openModal方法中：

$timeout(
    () => {
        const map = pickupMapControl.getGMap()
        map.setCenter(new google.maps.LatLng(item.location.latitude, item.location.longitude))
        google.maps.event.trigger(map, 'resize')
    },
    100
)

在html中，我有：

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;libraries=places&amp;key=AIzaSyAUKvpku-JhbniZY80NLq_A2Ejgk_b_lUc&amp;v=3.31" async></script>

和

<ion-modal-view>
  <ion-header-bar class="bar-calm">
    <h1 class="title">Pick-up Location</h1>
    <div class="button button-clear" ng-click="closeMapViewer()"><span class="icon ion-close"></span></div>
  </ion-header-bar>

  <ion-content class="pickup-location-viewer">
    <ui-gmap-google-map 
      center="pickup_map.center" 
      zoom="pickup_map.zoom" 
      control="pickup_map.control" 
      options="pickup_map.mapOptions" 
      draggable="true" 
      data-tap-disabled="true"
      ng-if="pickup_map.control"
    >
      <ui-gmap-circle center="marker.position" stroke="marker.stroke" fill="marker.fill" radius="marker.radius"></ui-gmap-circle>
      <ui-gmap-marker coords="userPosition" icon="{ url: 'img/user-pos-icon.png' }" idKey="user"></ui-gmap-marker>
    </ui-gmap-google-map>
  </ion-content>
</ion-modal-view>

这在Chrome和Safari（在桌面浏览器中）以及Android设备上都可以正常运行。

我的iOS屏幕截图如下：

我专门添加了屏幕截图，因为我知道很多人都有在底部显示Google徽标等的经验，但是这种情况不会发生。

真正奇怪的是，如果我稍微缩放或移动地图，地图将显示，但是，随后以编程方式设置缩放或重新居中地图将什么都不做。

我已经检查了网络调用，可以看到在iOS中，直到我移动地图之前，没有API调用最初发送给Google，而在网络和Android上，它们肯定是在打开模式时发送的。因此，似乎问题在于，无论出于何种原因，它都没有在iOS中正确初始化，尽管如上所述，代码库中没有任何更改。

我意识到当前最新的Google Maps稳定版本是v3.34，并且我仍在使用v3.31，但是我测试了每一个v3.35以下的增量版本，没有任何区别。

此外-并不是唯一重要的缩放控件，仅在iOS中是缺少的，这也许是一个相关问题，尽管在地图真正开始显示后它们甚至都没有显示。

任何有关此问题的建议将不胜感激！

Answer 1

灰色地图通常意味着您的API密钥不允许使用iOS地图。因此，在生成API密钥之前，请确保已启用ios的google maps android api v2和google maps sdk。

您需要为应用程序（而不是浏览器或服务器）生成API密钥。

然后，可以对iOS和Android使用相同的API。

由于您提到这行不通，因此请确保script标签位于头部和身体之间。

如果此操作也正确完成，请执行以下故障排除步骤： https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

如果您仍然收到错误消息，请告诉我，我会再次查看。

Answer 2

我想，有3种解决方案可以解决：

删除height并重新安装。

检查您的代码是否包含以下字符串：

Ionic

看看这个有用的GitHub讨论：Ionic Google Maps page is blank＃1573。

当未为您的API密钥启用Google Maps SDK时，也会发生此问题。要启用它，请在https://console.developers.google.com上打开开发人员控制台。您需要 有效的API密钥 。

在左侧面板上，选择platform.ready().then(() => { this.loadMap(); });。在 Google APIs 标题下选择 iOS版Google Map SDK ，然后选择Library。

请勿在{{1}}函数中调整地图大小，这没有任何意义。 您应该在第一次查看时初始化地图。任何更改都必须与初始化以及Enable API分开。 init应该在地图初始化之后发生，而不是在过程本身中发生。
```
resize event
```

Ionic v1 –最初未在iOS中加载Google地图

2 个答案: