如何在 Angular-project 中设置 mapboxgl.accessToken?
How to set mapboxgl.accessToken in Angular-project?
我想在 StackBlitz 上用 mapbox-gl 做一个例子。如何设置 accessToken?
编辑器声明“无法分配给 '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
});
}
}
终于通过替换解决了这个问题
import * as mapboxgl from 'mapbox-gl';
和
const mapboxgl = require('mapbox-gl');
我不知道为什么会这样(尽管有一些红色下划线)。它可能特定于 StackBlitz。我将把示例留在那里,但会禁用 Mapbox 中的密钥。
我一直在使用打字稿,我想继续使用导入。所以最后它适用于:
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>
如果我做错了什么请告诉我。
另一个技巧是访问令牌 属性,如下所示:(mapboxgl as any).accessToken = "your token"
我想在 StackBlitz 上用 mapbox-gl 做一个例子。如何设置 accessToken?
编辑器声明“无法分配给 '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
});
}
}
终于通过替换解决了这个问题
import * as mapboxgl from 'mapbox-gl';
和
const mapboxgl = require('mapbox-gl');
我不知道为什么会这样(尽管有一些红色下划线)。它可能特定于 StackBlitz。我将把示例留在那里,但会禁用 Mapbox 中的密钥。
我一直在使用打字稿,我想继续使用导入。所以最后它适用于:
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>
如果我做错了什么请告诉我。
另一个技巧是访问令牌 属性,如下所示:(mapboxgl as any).accessToken = "your token"