Как встроить Яндекс карту в Angular?

У меня есть виджет карты Яндекса, и я хочу встроить его в компонент Angular. Я использую угловой (v6)

Пробовал встраивать скрипты и корневой элемент в дерево:

ngAfterViewInit() {
  this.renderMapWidget();
}

renderMapWidget() {
  const ymapsScript = document.createElement('script');
  ymapsScript.src = '//api-maps.yandex.ru/2.1/?load=package.standard&lang=ru_RU';

  const ymapsWidgetScript = document.createElement('script');
  ymapsWidgetScript.src = '//...............';

  setTimeout(() => {
    document.body.appendChild(ymapsScript);
    document.body.appendChild(ymapsWidgetScript);
  }, 2000);
}

шаблон:

<div id="widget-container"></div>

Проверка виджета в Chrome показывает, что корневой элемент виджета отображается, но этот элемент пуст. Также я не вижу никаких ошибок в выводе консоли.


javascript angular yandex-maps yandex-api
person ptortyr45    schedule 16.08.2018    source источник
comment
Какой пакет вы используете — это angular2-yandex-maps? Также не могли бы вы обновить свой вопрос, включив соответствующий HTML?   -  person Narm    schedule 16.08.2018
comment
нативное API яндекс карт. нет углового пакета   -  person ptortyr45    schedule 16.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы встроить карту Яндекса в угловой компонент, я сделал следующие шаги:

  1. В основной index.html добавлен следующий скрипт (ссылка на yandex maps api может отличаться в зависимости от версии):

    <script src="https://api-maps.yandex.ru/2.1/?apikey=YOUR_YANDEX_API_KEY&lang=en_US" type="text/javascript"></script>

  2. Компонент, куда я хотел встроить карту:

    import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AdBoardAddDialogService} from "app/home/ad-board-add-dialog.service";

declare const ymaps: any;

@Component({
  selector: 'jhi-home',
  templateUrl: './yandex-maps.component.html',
  styleUrls: ['home.scss'],
})
export class YandexMapsComponent implements OnInit {
  map: any;
  latitude = 41.3;
  longitude = 69.3;
  @ViewChild('yamaps')
  el!: ElementRef;

  constructor(private adBoardAddDialogService: AdBoardAddDialogService) {
  }

  ngOnInit(): void {
    ymaps.ready().done(() => this.createMap());
  }

  private createMap(): void {
    this.map = new ymaps.Map('map', {
      center: [this.latitude, this.longitude],
      zoom: 14
    });

    const placeMark = new ymaps.Placemark([this.latitude, this.longitude]);
    this.map.geoObjects.add(placeMark);
  }

}

  3. А вот мой yandex-maps.component.html:

    <div class="row">
    <div class="col-md-12">
        <div id="map" style="width: 100%; height: 600px" #yamaps>
        </div>
    </div>
</div>

Можно изменить размер карты, заданной в html-коде.

person Khasan 24-7    schedule 26.02.2021