無法在ngx-mapbox-gl angular中顯示自定義標記圖標

Question

我正在嘗試在我的角應用中的mapboxgl地圖中顯示自定義標記圖標。 我已經完成了示例中顯示的所有內容，但是無法顯示自定義圖標。 如果我只是創建一個普通標記，它會在地圖上顯示正常。 但是當我嘗試指定我的自定義圖標時，沒有任何顯示。 我知道它拿起我的CSS，因為如果我將路徑名更改為不存在的文件，則會拋出錯誤。 當我將它們記錄到控制台時，我通過創建的標記對象和地圖查看，我將標記視為地圖的一部分。 但圖標不顯示。 嘗試調試這個的最佳方法是什么？ 自從我復制已發布的示例以來，我看不出任何明顯的錯誤。

    var el = document.createElement('div');
    el.className = 'breadcrumb';
    console.log('el=', el);

    var marker = new Marker(el)

      .setLngLat( [this.staticBreadcrumbs.features[0].geometry.coordinates[0],
               this.staticBreadcrumbs.features[0].geometry.coordinates[1]] )
      .setPopup(new Popup({ offset: 25 }) // add popups
      .setHTML('<h3>' + '</h3><p>' + 'hello marker' + '</p>'))
      .addTo(this._mapRef);


    console.log('adding static marker ', marker);
    console.log('map=', this._mapRef);

CSS：

.breadcrumb {
  background-image: url('breadcrumb-50px.png');
  width: 50px;
  height: 50px;
  z-index:999;
}

Answer 1

確保其工作的關鍵是從css中刪除背景圖像並將其添加到代碼中。

  el.style.backgroundImage = 'url("/assets/breadcrumb-5px.png")';
  el.style.width = '5px';
  el.style.height = '5px';

所有3件事都是必需的 - 因為url是本地文件所以引用路徑，並且高度和寬度都是顯示圖標所必需的。