0

Как подключить yandex maps в Angular 5 ? Я попробовал сделать компонент. Но выдает ошибку в браузере используя ng --open : ERROR TypeError: Cannot read property 'ready' of undefined Очевидно не инициализирован ymaps как его подгрузить?

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

@Component({
  selector: 'app-yamaps',
  templateUrl: './yamaps.component.html',
  styleUrls: ['./yamaps.component.css']
})
export class YamapsComponent implements OnInit {
  ymaps: any;
  myCoordinates: any;
  myMap: any;
  myPlacemark: any;
  closeMapButton: any;

  constructor() { }

  ngOnInit() {
    this.ymaps.ready().then(
      () => {
        this.myMap = new this.ymaps.Map("map", {
          center: [37.5468326405449, 55.6623162095321],
          zoom: 15,
          controls: ['fullscreenControl', 'geolocationControl']
        }, {
            yandexMapDisablePoiInteractivity: true,
            suppressMapOpenBlock: true
          });

        //Создаем кнопку на карте
        this.closeMapButton = new this.ymaps.control.Button({
          data: {
            content: "Закрыть карту"
          },
          options: {
            maxWidth: [170, 400, 600]
          }
        });

        // Задает кнопку кликом
        this.myMap.events.add('click', function (e) {
          if (this.myPlacemark == null)
            this.myPlacemark = new this.ymaps.Placemark([], {});
          this.myMap.geoObjects.add(this.myPlacemark);
          var position = e.get('coords');
          this.myPlacemark.geometry.setCoordinates(position);
          this.myCoordinates = this.myPlacemark.geometry.getCoordinates();
          document.getElementById('sendDataToServer').removeAttribute("disabled");
        });

        this.ymaps.geolocation.get({
          // Выставляем опцию для определения положения по ip
          //provider: 'yandex',
          // Карта автоматически отцентрируется по положению пользователя.
          mapStateAutoApply: true
        }).then(function (result) {
          this.myMap.geoObjects.add(result.geoObjects);
          this.myPostition = result.geoObjects.position;
        });
      });
  }
}
9
  • наверное вставить скрипт с yandex maps и только потом использовать их апи, или у вас есть другие варианты? к тому же у них есть готовый npm пакет npmjs.com/package/ymaps
    – arturovt
    13 сен 2018 в 9:54
  • npmjs.com/package/ymaps вот оболочка для якарт с промисом подгрузки самого ymaps 13 сен 2018 в 9:57
  • @ArtemGorlachev Подскажите, пожалуйста, как его использовать. У меня не выходит.
    – Masquitos
    13 сен 2018 в 10:27
  • в каком этапе не выходит? добавляете его в package.json (он же есть у вас?), потом import, потом ymaps.load().then(maps => { и понеслась, карты уже загружены и ready 13 сен 2018 в 10:38
  • @ArtemGorlachev Делаю так: constructor() { this.myMap = new ymaps.Map("map", { center: [37.5468326405449, 55.6623162095321], zoom: 15, controls: ['fullscreenControl', 'geolocationControl'] }, { yandexMapDisablePoiInteractivity: true, suppressMapOpenBlock: true }); } выдает ошибку ERROR TypeError: ymaps__WEBPACK_IMPORTED_MODULE_1___default.a.Map is not a constructor
    – Masquitos
    13 сен 2018 в 10:45

2 ответа 2

1

Пример на stackblitz

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

// map-loader.service.ts
import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MapLoaderService {
  map$: Subject<any>;

  constructor() {
    this.map$ = new Subject<any>();
  }

  getMap(element: string, coords: number[]): Observable<any> {
    const scriptYmaps = document.createElement('script');
    scriptYmaps.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
    document.body.appendChild(scriptYmaps);
    const createMap = () => {
      const map = new ymaps.Map(
        element,
        {
          center: coords,
          zoom: 9
        }
      )
    }
    scriptYmaps.onload = function () {
      ymaps.ready(createMap);
    }

    return this.map$;
  }
}

// app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MapLoaderService } from './map-loader.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  map: any;
  loading$: Subject<boolean>;
  ngUnsubscribe$: Subject<void>;

  constructor(
    private _mapLoaderService: MapLoaderService
  ) {
    this.loading$ = new Subject<boolean>();
    this.ngUnsubscribe$ = new Subject<void>();
   }

  ngOnInit() {
    this.loading$.next(true);
    this._mapLoaderService.getMap(
      'map',
      [55.751574, 37.573856]
    )
    .pipe(
      takeUntil(this.ngUnsubscribe$)
    )
    .subscribe(map => {
      this.map = map;
      this.loading$.next(false);
    });
  }

  ngOnDestroy() {
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }
}
1
  • getMap возвращает генератор, который ничего не генерирует при подписке, колбек внутри subscribe никогда не вызовется
    – arturovt
    10 фев 2019 в 21:44
0

Установил эту штуку https://www.npmjs.com/package/ymaps и прописал (window as any).global = window; вроде заработало.

import { Component, OnInit } from '@angular/core';
import ymaps from 'ymaps';
(window as any).global = window;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.