如何在Angular项目中设置mapboxgl.accessToken?

Question

我正在尝试在StackBlitz上使用mapbox-gl进行示例，如何设置accessToken？

编辑器显示“无法分配给'accessToken'，因为它是一个常量或只读属性”。

我已经尝试了另一个问题中提出的可能解决方案： Mapbox-gl类型不允许accessToken赋值

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('map') mapElement: ElementRef;
  map: mapboxgl.Map;

  ngOnInit() {
    mapboxgl.accessToken = '<token>';
    this.map = new mapboxgl.Map({
      container: this.mapElement.nativeElement,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    });
  }
}

完整的代码范例： https://stackblitz.com/edit/angular-9djiw2

- Kees Boogert

Answer 1

另一个技巧是按照以下方式访问令牌属性：(mapboxgl as any).accessToken = "your token"。

- Ivan Popkov

Answer 2

通过替换解决了这个问题。

import * as mapboxgl from 'mapbox-gl';

使用

const mapboxgl = require('mapbox-gl');

虽然看到了一些红色的下划线，但我不知道这为什么有效。这可能是特定于 StackBlitz 的。我会保留此示例，但将禁用来自 Mapbox 的密钥。

- Kees Boogert

---

+1，这对我也起作用了。要想消除红色下划线，只需在依赖选项卡中安装@types/node即可！ - Lauren

Answer 3

我正在使用Typescript并希望继续使用import。最终，以下代码可解决问题：

import { Map } from "mapbox-gl/dist/mapbox-gl"
import * as mapboxgl from "mapbox-gl/dist/mapbox-gl"

最初的回答：要创建地图实例，需要执行以下步骤：

然后，创建地图实例：

mapboxgl.accessToken = "YOUR_API_KEY_BLA_BLA_BLA"
this.map = new Map({
    container: "mapId",
    style: "mapbox://styles/mapbox/light-v9",
    zoom: 5,
    center: [-78.880453, 42.897852]
})

"最初的回答"，以下是需要翻译的内容：

并展示一个完整的例子。在html中：

<div id="mapId"></div>

如果我做错了什么，请告诉我。最初的回答。

- J.S.R - Silicornio

Answer 4

像这样做在2023年之前有效

在初始化时将其放入。

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('map') mapElement: ElementRef;
  map: mapboxgl.Map;

  ngOnInit() {
    this.map = new mapboxgl.Map({
      accessToken: '<token>',
      container: this.mapElement.nativeElement,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    });
  }
}

- mustafa.shykh