把默認的藍色標記改成我自己的圖標標記，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;
}