Mapbox GL JS 从默认标记更改颜色

Posted 2023-02-16

【中文标题】Mapbox GL JS 从默认标记更改颜色

【英文标题】：Mapbox GL JS Change the color from the default marker

【发布时间】：2018-11-26 17:00:13

【问题描述】：

我开始失去理智了。

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

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

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

使用此代码，地图显示时没有标记，如果我删除颜色选项，标记会正确显示，但颜色错误。

对我搞砸的地方有什么建议吗？

【参考方案1】：

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

【讨论】：

请考虑添加how and why this solves the problem的简要说明。这将有助于读者更好地理解您的解决方案。

【参考方案2】：

拧 jQuery

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

【参考方案3】：

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

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

【讨论】：

我刚刚复制并粘贴了它，效果很好。谢谢。

【参考方案4】：

在使用默认标记 SVG 元素时支持自定义颜色，因为 v0.45.0，您正在使用 v0.44.2。

发行说明：

https://github.com/mapbox/mapbox-gl-js/releases

【讨论】：

语法正确const marker = new mapboxgl.Marker( "color": "#b40219" )