要详细说明给出的两条注解，有两种不同的方法可以将自定义图像添加到Map中：

使用符号层

符号层存在于Map中，可用于可视化数据源。
首先，使用loadImage()获取图片URL：

map.loadImage('https://example.com/image.png', function(error, image) {
    if (error) throw error;

然后，使用addImage()将获取的图像转换为用于Map的图标：

map.addImage('pin', image);

最后，在图层上使用该图标：

map.addLayer({ id: 'mypin', type: 'symbol', paint: { 'icon-image': 'pin' });

完整示例：https://www.mapbox.com/mapbox-gl-js/example/add-image/

使用标记

或者，您可以使用标记。它位于Map上方，不与Map中的数据交互。
首先，为图片创建DOM元素：

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

接下来，基于此元素创建一个Marker对象，并将其添加到map中：

new mapboxgl.Marker(el)
    .setLngLat(mylatlng)
    .addTo(map);

完整示例：https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/

我强烈建议通过以下方式解决此问题：

首先创建元素来替换旧的标记：

const customMarker = document.createElement('div');
customMarker.style.backgroundImage = 'url(../../../assets/images/pin.svg)';
customMarker.style.backgroundSize = 'cover';
customMarker.style.backgroundPosition = 'center';
customMarker.style.width = '27px';
customMarker.style.height = '41px';

然后创建一个标记对象，参数为一个选项对象，属性如下：

const marker = new mapboxgl.Marker({
    anchor: 'bottom',
    element: customMarker,
  })
   .setLngLat([this.lng, this.lat])
   .addTo(map);

因为，如果你用其他方式解决这个问题，标记将几乎随机地放置在你的Map上，这将使ux看起来很糟糕

我的解决方案示例：

其他解决方案示例：

有关更多详细信息，请查看文档的这一部分：Docs

你可以很容易地这样使用。这段代码是从mapbox网站找到的

var marker = new mapboxgl.Marker({
  element: createCustomMarkerElement('./assets/images/heart.png'),
})
.setLngLat([location.lng, location.lat])
.addTo(map);

customMarker函数是

function createCustomMarkerElement(imagePath) {
    const el = document.createElement('div');
    const width = 50;
    const height = 55;
    el.className = 'marker';
    el.style.backgroundImage = 'url(' + imagePath + ')';
    el.style.width = `${width}px`;
    el.style.height = `${height}px`;
    el.style.backgroundSize = '100%';
    return el;
 }

Finaly use可以使用这样的一些样式

<style>
.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
</style>

希望这段代码能对你有所帮助。快乐编码