使用角度为14的mapbox-gl-directions

Question

有人知道如何在 Angular 14 中使用 mapbox-gl-directions 插件吗？我正在尝试复制这个示例：https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/但我找不到方法。到目前为止，我已成功在我的服务中加载基本地图：

import * as mapboxgl from 'mapbox-gl';

//var MapboxDirections = require('@mapbox/mapbox-gl-directions'); --> this doesn't work

public initializeMap(el: string){

    this.map = new mapboxgl.Map({
      center: this.center,
      container: el,
      style: 'styleUrl',
      zoom: 13
    });
    this.map.addControl(new mapboxgl.NavigationControl());
    // this.map.addControl(
    //   new MapboxDirections({
    //     accessToken: mapboxgl.accessToken
    //   }),
    //   'top-left'
    //   );
  }

对于mapbox-gl-directions，我运行 npm i @mapbox/mapbox-gl-directions 来安装它。

如有任何帮助，我们将不胜感激。

Answer 1

在组件中使用此代码并检查此教程，但它是西班牙语享受

export class AppComponent implements OnInit {
  title = 'mapboxApp';

  mapa!: Mapboxgl.Map;

  ngOnInit(){
    Mapboxgl!.accessToken = environment.mapboxKey;
    this.mapa = new Mapboxgl.Map({
    container: 'mapa-mapbox', // container ID
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-75.76, 45.35], // starting position
    zoom: 16.6 // starting zoom
    });

    this.createMarker(-75.76, 45.35 )
  }

  createMarker(lng: number, lat: number) {

    const marker = new Mapboxgl.Marker({
      draggable: true
      }).setLngLat([lng, lat])
      .addTo(this.mapa);

      marker.on('drag', () => {
        console.log(marker.getLngLat());
        
      })

  }
}

Answer 2

//@ts-ignore

从“@mapbox/mapbox-gl-directions/dist/mapbox-gl-directions”导入*作为MapboxDirection