reactjs - 没有geojson的React中的自定义MapBox图标

Question

我正在尝试在 React 的 mapbox 中为我的地图标记创建自定义图标，但是基本上所有现有文档都描述了当您使用 geojson 包装器定义一组标记时如何完成此操作。这个解决方案对我不起作用，因为这个应用程序的标记数量需要是动态的。

var el = document.createElement("div");
    el.className = 'marker';
    el.style.backgroundImage = 'url(droneIconSVG.svg)';
    el.style.width = "50000px";
    el.style.height = "50000px";

    console.log(el.style.backgroundImage);
    console.log(image01);

    var drones = {};



    firebase
      .database()
      .ref("drones")
      .on("child_added", function(snapshot) {

        var drone = new mapboxgl.Marker(el).setLngLat([snapshot.val().lat, snapshot.val().lng]).addTo(map);

        drones[snapshot.val().id] = drone;
      });

此代码显示了标记的创建，并将该标记分配给已添加到我在 firebase 中的实时数据库中的每个“无人机”图标。关于为什么它可能无法正确代表我的“droneIconSVG.svg”文件的任何想法？这是我从 illustrator 导出的普通 SVG 文件。

谢谢

标签： reactjsmapbox