В настоящее время я работаю над проектом, который включает создание пользовательских маркеров (с использованием готовых значков), а затем динамическое размещение и обновление их позиций. Мы добавили Mapbox JS документацию для добавления этих пользовательских значков, но на карте отображается только фон значка. Например, если мы используем значок с прозрачным фоном, то он ничего не показывает, но если мы используем значок с красным фоном, то он показывает красный блок. Единственный раз, когда мы заставили его работать, это когда мы использовали ссылку на онлайн-файл SVG.
Вот текущий раздел кода, который обрабатывает пользовательские значки:
componentDidMount = () => {
const { lng, lat, zoom } = this.state;
var droneList = [];
const map = new mapboxgl.Map({
container: this.mapContainer,
style: "mapbox://styles/mapbox/streets-v9",
center: [lng, lat],
zoom: zoom
});
map.on("move", () => {
const { lng, lat } = map.getCenter();
this.setState({ lng: lng.toFixed(4),
lat: lat.toFixed(4),
zoom: map.getZoom().toFixed(2)
});
});
var el = document.createElement("div");
el.className = 'marker';
el.style.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/appliance-1/100/Drone-07-512.png)';
el.style.width = "500px";
el.style.height = "500px";
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 .database() .ref("drones") .on("child_changed", function(snapshot) {
drones[snapshot.val().id].setLngLat([snapshot.val().lat, snapshot.val().lng]);
});
};