Проблемы с Google Maps API после перехода со страницы, которая его использует, в Angular 5 - PullRequest
0 голосов
/ 14 мая 2018

Я работаю над сайтом, который продвигает события, используя Angular 5. Короче говоря, на моем сайте есть следующие страницы:

  • Поиск событий (есть карта города + список событий)
  • Сведения о событии (содержит информацию + адрес для данного конкретного события)
  • Другие страницы

Когда я посещаю сведения о событии после двухкратной навигации (с использованием стандартного углового маршрутизатора)Я получаю ошибку с initMap, который я использую в деталях события.Это происходит независимо от того, куда я направляюсь, на второй странице, на которую я захожу после подробного описания события.Так что я могу сделать: Детали события -> Главная -> Конфиденциальность ||Подробности события -> Настройки -> Поиск ||любая другая комбинация, и я всегда получаю ошибку.

Появляющаяся ошибка говорит:

core.js:1350 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'firstChild' of null
TypeError: Cannot read property 'firstChild' of null
    at Object._.Sf (js?libraries=places&sensor=false&key=AIzaSyAX_2XrKSeS99ldBXSt_ffRfDtKBj9S2wI:83)
    at new Wf (js?libraries=places&sensor=false&key=AIzaSyAX_2XrKSeS99ldBXSt_ffRfDtKBj9S2wI:84)
    at EventBuyComponent.initMap (event-buy.component.ts:184)
    at SafeSubscriber.eval [as _next] (event-buy.component.ts:120)
    at SafeSubscriber.__tryOrSetError (Subscriber.js:248)
    at SafeSubscriber.next (Subscriber.js:188)
    ...

Я не хочу размещать много кода, поэтому я начнуsmall:

initMap (на странице сведений о событии, aka event-buy.component.ts):

initMap() {
    if (this.event && this.event.location.coordinates) {
      var location = new google.maps.LatLng(this.event.location.coordinates[1], this.event.location.coordinates[0]);

      var mapCanvas = document.getElementById('map');
      var mapOptions = {
        center: location,
        zoom: 16,
        panControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        clickableIcons: false,
        mapTypeControl: false
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);

      var marker = new google.maps.Marker({
        icon: "/assets/img/marker-normal.png",
        position: location,
        map: map
      });

      this.mapInitialized = true;
    }
  }

Эта функция запускается после загрузки данных события в пределах:

this.route.data.subscribe((routeData: { data: Event }) => {
...
}

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

Почему этопроисходит?Почему обещание в файле js карт не работает после того, как оно сработало 2 страницы назад?

1 Ответ

0 голосов
/ 15 мая 2018

Мне кажется, что вы пытаетесь использовать параметры маршрута из дочернего маршрута, иначе.например, вы пытаетесь получить подробный идентификатор события страницы из представления списка.Хотя в представленном вами коде не указано, что это так, я подозреваю, что у вас может быть средство распознавания маршрутов и т. Д., Где вы используете похожий код ...

Например, возможно

this._route.firstChild.snapshot.params['event-id']

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

Я нашел быстрый фрагмент, если это так, то это ваш случай,о том, как мы проверяем, инициализирован ли firstChild.

if ( this._route.firstChild && this._route.firstChild.snapshot.params['event-id'] 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...