把默认的蓝色标记改成我自己的图标标记，mapbox angular

Question

我正在尝试将默认的蓝色标记更改为我自己的类型，我遇到了问题，因为文档中提到了更改多个标记，我将始终在我的 map 中查看一个标记。 有没有办法做到这一点？ map 正在加载，但现在没有显示任何标记，所以我很接近，但没有雪茄。 我想使用 ALARM_CENTER.svg 图标。

组件.ts：

createMap(lng: number, lat: number, zoom: number, createMarker: boolean) {
    this.mapa = new mapboxgl.Map({
      accessToken: environment.mapBox,
      container: 'mapElement',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat], // starting position [lng, lat]
      zoom: zoom,
      attributionControl: false,
    });
    createMarker ? this.createMarker(lng, lat) : '';
  }

  createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    new mapboxgl.Marker({element: "<div class='marker'>"}).setLngLat([lng, lat]).addTo(this.mapa);
 
  }

样式.css：

.marker {
  background-image: url("/assets/shopProtection/ALARM_CENTER.svg");
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

Answer 1

It was a combination of things, I put the css in the main style.css, not the component.css, something to do with lazy component not loading styles in the component.css. 最终代码：

组件.ts

createMarker(lng: number, lat: number) {
    var el = document.createElement('div');
    el.className = 'marker';
    const marker = new mapboxgl.Marker(el).setLngLat([lng, lat]).addTo(this.mapa);
  }

样式.css：

.marker {
  background-size: contain;
  width: 50px;
  height: 50px;
  background-image: url("/assets/img/marker.svg");
  background-repeat: no-repeat;
}