Как использовать геокодер в проекте Angular 2+?

Question

[Алексей]

Добрый вечер товарищи!
Мне необходимо выполнить работу на Angular с использованием яндекс карт. Сначала я создал проект Angular 2+ по инструкции, установил специальный компонент из npm angular2-yandex-maps. Этот компонент всем хорош, имеет богатый функционал, отлично задокументирован, есть много примеров кода. Но маршруты с его помощью строить на Я-картах не получается, а мне как раз это и нужно.
Тогда я пошел другим путем, установил компонент ymaps по инструкции. В файл polyfills.ts добавил строку

(window as any).global = window;

в файле моего компонента сделал

import ymaps from 'ymaps';

В общем получился вот такой код:

import {Component, OnInit} from '@angular/core';
import ymaps from 'ymaps';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  map: any;
  points = ['Москва, метро Смоленская', 'Москва, метро Арбатская', [55.734876, 37.59308]];
  multiRoute: any;

  ngOnInit() {
    ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
      this.map = new maps.Map('map', {
        center: [55.75, 37.6],
        zoom: 8,
        controls: ['geolocationControl', 'zoomControl']
      });
      this.multiRoute = new maps.multiRouter.MultiRoute({
        referencePoints: this.points
      }, {
        boundsAutoApply: true,
        reverseGeocoding: true,
        viaPointDraggable: true
      });
      new maps.geocode('Москва', {result: 1}).then(res => {
        console.log(res);
      }, err => {
        console.log(err);
      });
      this.renderRoute();
    })
      .catch(error => console.log('Failed to load Yandex Maps', error));
  }

  addPoint(point: string) {
    if (point === '') {
      return;
    }
    this.points.push(point);
    this.updateRoute();
    this.geoCoder(point);
    // this.map.setCenter([55.818, 37.513]);
  }

  dellPoint(i: number) {
    this.points.splice(i, 1);
    this.updateRoute();
  }

  renderRoute() {
    this.map.geoObjects.add(this.multiRoute);
    this.multiRoute.editor.start();
  }

  updateRoute() {
    this.multiRoute.model.setReferencePoints(this.points);
    this.map.options.set('mapStateAutoApply', true);
  }

  geoCoder(point: any) {
    new ymaps.geocode('Москва', {result: 1}).then(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
  }
}

Все отлично работает. Создается карта, строится маршрут. Но как использовать геокодер в этом проекте никак не пойму. Если я выполняю код внутри ngOnInit, то все хорошо, получаю объект в консоле.

ngOnInit() {
    ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
        new maps.geocode('Москва', {result: 1}).then(res => { console.log(res); }, err => { console.log(err); });
    });
}

Если я этот же код выполняю в отдельной функции, то получаю ошибку

ERROR TypeError: "ymaps__WEBPACK_IMPORTED_MODULE_1___default.a.geocode is not a constructor"

geoCoder(point: any) {
    new ymaps.geocode('Москва', {result: 1}).then(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
  }

А мне нужно использовать геокодер в отдельной функции внутри моего компонента и передавать в нее параметры. Как быть?

Answer 1

[Даша Циклаури]

Если я этот же код выполняю

это не этот же код

ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps => {
  new maps
})

и
new ymaps
разница налицо

Comments

[Алексей]

Согласен, не этот. Но как сделать чтобы заработала функция?

[Даша Циклаури]

Aleks, типичный ответ - взять тот код, который уже работает. Первый же, да?

geoCoder(point: any) {
    ymaps.load('https://api-maps.yandex.ru/2.1/?lang=ru_RU').then(maps =>
    new maps.geocode('Москва', {result: 1}).then(res => {
      console.log(res);
    }, err => {
      console.log(err);
    });
    );
  }

[Алексей]

Да действительно, сработало. Огромное вам спасибо.