Ionic v1 - Карты Google первоначально не загружаются в iOS

У меня действительно странная проблема, которая началась около недели назад.

У меня есть ионное приложение v1, в котором используются карты Google (не плагин cordova, а веб-версия карт Google), и эти карты открываются в модальном режиме и всегда работают (по крайней мере, два года).

Код 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-карт - v3.34, и я все еще использую v3.31, но я тестирую каждую инкрементную версию до v3.35, и ничто из этого не изменило ситуацию вообще.

Кроме того, но не так важно, что элементы управления масштабированием отсутствуют только в iOS, возможно, это связанная с этим проблема, хотя они даже не отображаются, как только карта действительно начинает отображаться.

Любые предложения по этой проблеме будут оценены!

Ответ 1

Серая карта часто означает, что ваш ключ API не позволяет использовать карту iOS. Таким образом, убедитесь, что вы включили поддержку карт google android api v2 и google maps sdk для ios, прежде чем генерировать ключ API.

Вам необходимо создать ключ API для приложения (не для браузера или сервера).

Затем можно использовать тот же API для iOS и Android.

Поскольку вы упоминаете, что это не работает, убедитесь, что тег сценария находится между головкой и телом.

Если это также сделано правильно, выполните следующие действия по устранению неполадок: https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

Если вы все еще получите ошибку, сообщите мне, и я снова посмотрю на нее.

Ответ 2

Я полагаю, есть три решения:

Удалите Ionic и переустановите его.

Проверьте, имеет ли ваш код следующие строки:

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

Посмотрите на это полезное обсуждение GitHub: страница Ionic Google Maps пуста # 1573.

Также эта проблема возникает, когда SDK Google Maps не включен для вашего ключа API. Чтобы включить его, откройте консоль разработчика на странице https://console.developers.google.com. Вам нужен действительный ключ API.

На левой панели выберите " Library. Выберите Google Map SDK для iOS под заголовком API Google и выберите " 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); 
});
```