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是本地文件，因此必须在路径周围加引号，并且高度和宽度都必须使图标显示。

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

1 个答案: