Пользовательские маркеры с использованием Map Box + React - PullRequest
Новая
       4

Пользовательские маркеры с использованием Map Box + React

1 голос
/ 31 января 2020

В настоящее время я работаю над проектом, который включает создание пользовательских маркеров (с использованием готовых значков), а затем динамическое размещение и обновление их позиций. Мы добавили 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]);
       });
 };
...