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 выглядит так:

6L8EH.jpg

Я специально добавил скриншот, потому что знаю, что у многих людей есть опыт, когда логотип 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

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

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

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

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

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

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

enter image description here

На левой панели выберите " Library. Выберите Google Map SDK для iOS под заголовком API Google и выберите " Enable API.

enter image description here

  1. Не изменяйте размер своей карты внутри функции 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); 
    });