Mapbox GL-JS：如何为图标实例添加自定义图像？

Question

我在我的地图中添加了一个基本图标实例，但不知道如何给它一个自定义图像。 （我密切关注 this example 。经过一些挖掘，我在 Mapbox 自己的页面上找到了示例，其中包含显示如何添加自定义图像的代码，但看起来他们正在将标记添加为图层（使用 GeoJSON 源）。看起来是这样很多代码只是为了有一个自定义图像。我的代码看起来像这样：

var marker = new mapboxgl.Marker()
.setLngLat([-99, 30])
.addTo(map);

有没有办法添加我自己的图片 (PNG) 等？我在 Mapbox documentation at this link 上搜索了标记实例的选项，但我在那里找不到任何信息。

Answer 1

试试这个...

var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://path_to_your_icon/icon.png)';
el.style.width = '50px';
el.style.height = '50px';

new mapboxgl.Marker(el)
.setLngLat([-99, 30])
.addTo(map);