Ionic v1 — карты Google изначально не загружаются в iOS

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

У меня есть приложение ionic 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, возможно, это связанная проблема, хотя они даже не отображаются, когда карта действительно начинает отображаться.

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


person IonicBurger    schedule 23.08.2018    source источник
comment
У вас может быть проблема с безопасностью контента в iOS: github.com/ionic -team/ionic-starter-maps/issues/10   -  person mchl18    schedule 25.09.2018
comment
Спасибо, тем временем проверим это!   -  person IonicBurger    schedule 25.09.2018
comment
Не могли бы вы показать часть своего кода, где вы загружаете вещи в iOS?   -  person AD Progress    schedule 26.09.2018
comment
Или, возможно, github acc, где это можно проверить.   -  person AD Progress    schedule 26.09.2018
comment
Вы уверены, что кордова не установлена? как обычно он устанавливается по умолчанию. Просто проверьте и переустановите, может поможет   -  person AD Progress    schedule 26.09.2018


Ответы (2)


Серая карта часто означает, что ваш ключ API не позволяет использовать карту iOS. Итак, убедитесь, что вы включили google maps 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

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

person Tiago Martins Peres 李大仁    schedule 24.09.2018
comment
Хорошо, хорошо, поэтому я не использую плагин (обновлю вопрос, чтобы было понятно). Кроме того, эта проблема немного отличается, потому что она загружает слова Google внизу, что означает, что карта загружается, но по какой-то причине не отображается (например, проблема с учетной записью Google). У меня вообще карта не загружается. - person IonicBurger; 25.09.2018
comment
веб-версия карт Google означает, что ключ API, который вы используете, предназначен для браузера? В отличие от приложения, как я упоминал в ответе. - person Tiago Martins Peres 李大仁; 25.09.2018
comment
Также поместите ; в метод openModal. - person Tiago Martins Peres 李大仁; 25.09.2018
comment
› веб-версия карт Google означает, что ключ API, который вы используете, предназначен для браузера. Да, это правильно. Ionic — это, по сути, просто веб-просмотр, включенный в приложение. - person IonicBurger; 26.09.2018
comment
Давайте продолжим обсуждение в чате. - person Tiago Martins Peres 李大仁; 26.09.2018

Думаю, есть 3 решения:

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

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

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

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

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

введите здесь описание изображения

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

введите здесь описание изображения

  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); 
    });
    
person Andy Fedoroff    schedule 20.09.2018
comment
Извините, я не использую этот плагин cordova-plugin-googlemaps, я использую Google Maps напрямую. - person IonicBurger; 21.09.2018
comment
Это всегда первый шаг, и я безуспешно пробовал его сотни раз. - person IonicBurger; 25.09.2018