Mapbox 标记抛出 TypeError

Question

我正在尝试从 mapbox 向我的地图添加标记。

这是我的 Angular TypeScript 代码。

export class MappViewComponent implements OnInit {
  map: mapboxgl.Map;
  lat = 41.1293;
  lng = -8.4464;
  style = "mapbox://styles/mapbox/streets-v11";
  zoom = 8;

  constructor(
    private mapService: MapService,
    private nodeService: NodeService
  ) {}

  ngOnInit() {
    this.buildMap(this.map);
    /*var mymap = L.map('mapID').setView([41.260555, -8.436098], 10);
    this.buildMap(mymap);*/
    this.addMarkersLines(this.map);
    new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);
  }

  /**https://leafletjs.com/reference-1.7.1.html */
  buildMap(map: any) {
    map = new mapboxgl.Map({
      accessToken:
        "accessToken",
      container: "mapID",
      style: this.style,
      zoom: this.zoom,
      center: [this.lng, this.lat],
      antialias: true,
      attributionControl: false,
    });
    map.addControl(new mapboxgl.NavigationControl());

问题是，在控制台中运行之后，它会在这一行抛出此错误：

new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);

错误类型错误：t 未定义添加到地图框-gl.js:35 ngOnInit mapp-view.component.ts:30

有人遇到过这种问题吗？

Answer 1

很可能发生错误，因为 this.map 在这里是 undefined:

new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);
                                                            ^^^^^^^^  
                                                            undefined

函数 buildMap 的实现方式不会影响传递的对象，这意味着 this.map 在您的情况下保持 undefined .尝试重构buildMap函数，例如：

buildMap() {
    this.map = new mapboxgl.Map({
      accessToken: MAPBOX_TOKEN,
      container: 'mapID',
      style: this.style,
      zoom: this.zoom,
      center: [this.lng, this.lat],
      antialias: true,
      attributionControl: false,
    });
    this.map.addControl(new mapboxgl.NavigationControl());
 }

用法

ngOnInit() {
    this.buildMap();
    new mapboxgl.Marker().setLngLat([this.lng, this.lat]).addTo(this.map);
}

Mapbox 标记抛出 TypeError

Mapbox markers throws TypeError

javascript

typescript

mapbox-gl-js

angular