如何在 Mapbox GL JS 中将图标添加到没有 geojsonlayer 的标记

Posted 2023-05-06

【中文标题】如何在 Mapbox GL JS 中将图标添加到没有 geojsonlayer 的标记

【英文标题】：How to add an icon to marker without geojsonlayer in Mapbox GL JS

【发布时间】：2021-10-15 20:44:01

【问题描述】：

我找到了以下代码：

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

效果很好。现在我想要一个特殊的图标或图像，而不是基本的地图框图标。我该怎么做呢？ Mapbox 提供了许多关于为标记提供图标和图片的示例，但我只找到了具有 geojson 功能的方法（例如 https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ ）。但我不想仅仅因为加载一个图标就创建一个 geojson 层。我只想用这3行代码。

【参考方案1】：

该示例中没有任何内容需要 GeoJSON 层。

您可以复制/粘贴示例的这一部分：

const el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = `url(https://placekitten.com/g/30/30)`;

然后使用该元素创建标记：

const marker = new mapboxgl.Marker(el)
...