Javascript 如何在Angular中嵌入Yandex贴图?
我有一个Yandex地图小部件,我想把它嵌入到一个角度组件中。我使用的是Angular(v6) 我尝试将脚本和根元素嵌入到树中:Javascript 如何在Angular中嵌入Yandex贴图?,javascript,angular,yandex-maps,yandex-api,Javascript,Angular,Yandex Maps,Yandex Api,我有一个Yandex地图小部件,我想把它嵌入到一个角度组件中。我使用的是Angular(v6) 我尝试将脚本和根元素嵌入到树中: ngAfterViewInit() { this.renderMapWidget(); } renderMapWidget() { const ymapsScript = document.createElement('script'); ymapsScript.src = '//api-maps.yandex.ru/2.1/?load=package.
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中检查widget会显示widgets根元素,但该元素为空。此外,我没有在控制台输出中看到任何错误。为了在角度组件上嵌入Yandex贴图,我执行了以下步骤:
<div class="row">
<div class="col-md-12">
<div id="map" style="width: 100%; height: 600px" #yamaps>
</div>
</div>
</div>
您可以更改html代码中给定地图的大小。您使用的是什么软件包-是吗?另外,您是否会更新您的问题,以包括相关的HTML?原生yandex maps api。无角包装
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);
}
}
<div class="row">
<div class="col-md-12">
<div id="map" style="width: 100%; height: 600px" #yamaps>
</div>
</div>
</div>