Mapbox GL JS如何将默认标记的颜色更改？

Question

我开始变得有些疯狂了。

根据 Mapbox API ，我应该能够更改默认标记颜色，但是在文档中我没有找到任何不使用自定义标记的示例，而最可能的语法也无效。

我正在使用 mapbox-gl-js/v0.44.2

var marker = new mapboxgl.Marker({ "color": "#b40219" })
                .setLngLat([0, 0])
                .addTo(map);

使用此代码时，地图显示没有标记，如果我删除颜色选项，则标记会正确显示但颜色不对。有什么建议可以帮忙找出问题所在吗？

- fdelaneau

Answer 1

抛弃jQuery

setMarkerColor(marker, color) {
      let markerElement = marker.getElement();
      markerElement
        .querySelectorAll('svg g[fill="' + marker._color + '"]')[0]
        .setAttribute("fill", color);
      marker._color = color;
    },

- Max

---

这段代码会在之前的颜色为#000000时改变标记阴影的颜色：https://i.stack.imgur.com/3pILu.png - Pavel Chuchuva

Answer 2

自从v0.45.0版本开始，使用默认的标记SVG元素时支持自定义颜色。您正在使用v0.44.2版本。

发布说明： https://github.com/mapbox/mapbox-gl-js/releases

- pathmapper

---

语法正确，const marker = new mapboxgl.Marker({ "color": "#b40219" })。 - Mark Swardstrom

Answer 3

如果您需要动态更改默认标记的颜色，可以使用以下函数（使用jQuery获取元素的子元素）：

function setMarkerColor(marker, color) {
    var $elem = jQuery(marker.getElement());
    $elem.find('svg g[fill="' + marker._color + '"]').attr('fill', color);
    marker._color = color;
}

- Anton Suslov

---

我刚刚复制粘贴了它，它完美地工作了。谢谢。 - sugaith

Answer 4

设置标记时，将颜色放在括号中：
new mapboxgl.Marker({ "color": "#b40219" }) //这会将颜色更改为深红// .setLngLat([-74.5, 40]) .addTo(map);

- Jordan Davis

Answer 5

marker = new mapboxgl.Marker({
        color: $parameters.UpdatedMarkerColor,
        draggable: false
    });

- Francisco F

---

请考虑添加一个简短的解释，说明如何以及为什么这个解决方案能够解决问题。这将有助于读者更好地理解您的解决方案。 - tdy