Mapbox自定义图标

Question

我正在使用 mapbox，我想从我的本地设备在地图上添加自定义图标。我正在使用一个例子：https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ 但我想从我的设备或项目文件夹中选择图像或图标以供使用。就像。

var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage ='../images/icon.png';
    el.style.width = 29 + 'px';
    el.style.height = 29 + 'px';

但这不起作用。工作线是。

url(https://docs.mapbox.com/mapbox-gl-js/assets/cat.png)

;

Answer 1

1. 在您提供的代码片段中，您正在设置背景图像样式属性，这意味着“../images/icon.png”将不起作用，您必须将其指定为 url(../images /icon.png)

2. 如果还是不行，尝试将你的图像转换为base64并设置为el.style.backgroundImage = url（你的base64编码图像），如果有效，那么路径问题

Answer 2

您需要将 el.style.backgroundImage 行更改为

el.style.backgroundImage ='url("../images/icon.png")';

或者你可以摆脱通过 JS 设置样式并将它们添加到 CSS 文件

.marker {
    background-image: url('../images/icon.png'); 
    background-size: cover;
    width: 29px; 
    height: 29px;
}