Ionic v1 - 谷歌地图最初没有在 iOS 中加载

Posted 2023-03-16

【中文标题】Ionic v1 - 谷歌地图最初没有在 iOS 中加载

【英文标题】：Ionic v1 – Google maps are not initially loading in iOS

【发布时间】：2019-01-29 17:37:41

【问题描述】：

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

我有一个 ionic v1 应用程序，它使用谷歌地图（不是科尔多瓦插件，而是谷歌地图的网络版本），这些地图以模式打开并且一直有效（至少两年）。

我目前拥有的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 屏幕截图如下所示：

我特地添加了截图，因为我知道很多人都有谷歌标志等出现在底部的经验，但在这种情况下并没有发生。

真正奇怪的是，如果我稍微缩放或移动它，地图就会显示出来，但是，之后以编程方式设置缩放或重新居中地图没有任何作用。

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

我意识到目前最新的稳定版本的谷歌地图是 v3.34，我仍在使用 v3.31，但我测试了 v3.35 之前的每个增量版本，但这些都没有任何区别。

此外，缩放控件仅在 iOS 中没有那么重要，但也许这是一个相关的问题，尽管它们甚至不会在地图真正开始显示时出现。

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

【问题讨论】：

您的 iOS 可能存在内容安全问题：github.com/ionic-team/ionic-starter-maps/issues/10

谢谢，同时会调查此事！

您能否展示您在 iOS 中加载内容的部分代码？

或者是可以测试的 github acc

你确定没有安装cordova吗？通常它会默认安装。仔细检查并重新安装它可能会有所帮助

【参考方案1】：

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

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

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

因为您提到这不起作用，请确保脚本标签位于头部和主体之间。

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

如果您仍然收到错误，请告诉我，我会再看一遍。

【讨论】：

对，好的，所以我没有使用插件（将更新问题以使其清楚）。此外，该问题略有不同，因为它确实在底部加载了 Google 字样，这意味着它正在加载地图，但由于某种原因它没有显示（即 Google 帐户问题）。我的根本不加载地图。

“谷歌地图的网络版”这是否意味着您使用的 API 密钥是用于浏览器的？反对我在答案中提到的申请。

另外，将 ; 放在 openModal 方法中。

> "web version of google maps" 这意味着您使用的 API 密钥是用于浏览器的。对，那是正确的。 Ionic 本质上只是一个包含在应用程序中的 web 视图。

让我们continue this discussion in chat.

【参考方案2】：

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

删除Ionic 并重新安装。

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

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

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

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

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

不要在 init 函数内调整地图大小，这没有意义。 您应该在第一次查看地图时对其进行一次初始化。任何更改都必须与初始化以及resize event 分开。 resize event 应该在地图初始化之后出现，而不是在进程本身中。

var map = ...; // map initialisation

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

【讨论】：

抱歉我没有用cordova-plugin-googlemaps那个插件，我直接用谷歌地图。

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