无法在 ngx-mapbox-gl 中显示自定义标记图标 angular

Question

我正在尝试在我的 angular 应用程序的 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 是本地文件，路径周围的引号，并且需要高度和宽度才能显示图标。

无法在 ngx-mapbox-gl 中显示自定义标记图标 angular

Can't display custom marker icon in ngx-mapbox-gl angular

mapbox-gl

angular