Ionic v1 - Google地图在iOS上未能初始加载

Question

Ionic v1 - Google地图在iOS上未能初始加载

22

我遇到了一个非常奇怪的问题，大约一周前开始出现。

我有一个使用Google地图的ionic v1应用程序（不是Cordova插件，而是Google地图的Web版），这些地图在模态框中打开并且一直能够正常工作（至少有两年时间）。

我当前拥有的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>

and

<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中，在我移动地图之前不会初始发送到Google的API调用，而在Web和Android上，它们绝对会在打开模态时发送。所以问题似乎是由于某种原因在iOS中没有正确初始化，尽管如上所述，代码库中最近没有更改过任何内容。

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

此外-虽然不是很重要-只有在iOS中缩放控件才会消失，也许这是一个相关的问题，尽管它们在地图实际开始显示后甚至都不会出现。

对于这个问题有什么建议吗？

- JackDev

你可能会在iOS上遇到一个内容安全问题：https://github.com/ionic-team/ionic-starter-maps/issues/10 - mchl18

谢谢，我会在此期间进行调查！ - JackDev

你能展示一下在iOS中加载东西的代码部分吗？ - AD Progress

或者一个 GitHub 账户，可以在其中进行测试。 - AD Progress

你确定 Cordova 没有安装吗？通常情况下它会默认安装。请再次确认并重新安装，这可能会有所帮助。 - AD Progress

2个回答

2

我想，有三种解决方案可以解决这个问题:

删除 Ionic 并重新安装它。

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

platform.ready().then(() => {
    this.loadMap();
});

看一下这个有用的 GitHub 讨论：Ionic Google 地图页面空白 #1573。

当你的 API 密钥没有启用 Google Maps SDK 时，也会出现此问题。要启用它，请在 https://console.developers.google.com 打开开发人员控制台。你需要一个有效的 API 密钥。

在左侧面板选择 Library。在 Google APIs 标题下，选择 Google Map SDK for iOS，然后选择 Enable API。

Do not resize your map inside an init function, it doesn’t make sense. You should initialise the Map once on the first time you’re viewing it. Any alterations must be separated from the initialisation, as well as the resize event. The resize event should occur after your map has initialised and not in the process itself.
```
var map = ...; // map initialisation

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});
```

- Andy Jazz

抱歉，我不使用cordova-plugin-googlemaps插件，我直接使用Google Maps。 - JackDev

这总是第一步，我已经尝试了数百次都没有成功。 - JackDev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tiago Martins Peres · Accepted Answer

灰色地图通常意味着您的API密钥不允许使用iOS地图。因此，请确保在生成API密钥之前启用了Google Maps Android API v2和Google Maps SDK for iOS。

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

然后，可以将同一API用于iOS和Android。

如果您提到这无法正常工作，请确保脚本标记位于head和body之间。

如果这也做得正确，请按照以下故障排除步骤进行操作： https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md 如果仍然出现错误，请告诉我，我会再次查看它。