javascript - 如何在 Angular 中嵌入 Yandex 地图？

Question

我有一个 Yandex 地图小部件，我想将它嵌入到一个 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 中检查小部件显示小部件根元素已显示，但该元素为空。我也没有在控制台输出中看到任何错误。

Answer 1

为了在角度组件上嵌入 Yandex 地图，我执行了以下步骤：

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 代码中给出的地图的大小。