mapa.addControl(new mapboxgl.NavigationControl()) 不在 Angular 上

Question

我正试图在10版本的Angular web应用程序中使用这些控件，但我不知道为什么不起作用。

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from "@angular/core";
import * as mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
@Component({
selector: "app-mini-map",
templateUrl: "./mini-map.component.html",
styleUrls: ["./mini-map.component.sass"],
})
export class MiniMapComponent implements OnInit, AfterViewInit {
@ViewChild("miniMapa") divmapa!: ElementRef;
mapa!: mapboxgl.Map;
constructor() {}
ngOnInit(): void {
}
ngAfterViewInit(): void {
const mapa = new mapboxgl.Map({
container: this.divmapa.nativeElement,
style: "mapbox://styles/mapbox/streets-v11",
center: [-72.25323448337556, 11.373452774112943],
zoom: 4,
});
mapa.addControl(new mapboxgl.NavigationControl());
}
}

我一直在关注官方页面上的教程，并看到了许多其他例子，但我还不能做到这一点。

Answer 1

您应该使用this.mapa来访问类变量，如：

ngAfterViewInit(): void {
this.mapa = new mapboxgl.Map({
container: this.divmapa.nativeElement,
style: "mapbox://styles/mapbox/streets-v11",
center: [-72.25323448337556, 11.373452774112943],
zoom: 4,
});

this.mapa.addControl(new mapboxgl.NavigationControl());
// ^^ "this" is important here!
}