Блог

Я создаю проект React Mapbox с помощью mapboxgl (примечание: не версия оболочки React). До сих пор мне удавалось добавлять то, что я хотел бы, на карту и в свою базу данных, но у меня возникают проблемы с отображением всех данных в виде маркеров / точек / всплывающих окон.

Сообщение, которое я получаю в Chrome, — ошибка типа: не удается прочитать свойство ‘getCanvasContainer’ неопределенного значения.

Мне интересно, связано ли это с самой моей картой (и отсутствием оболочки React для Mapbox) или с координатами. Прямо сейчас я вручную устанавливаю координаты как const coords , но если я этого не сделаю, я получаю сообщение: Ошибка: LngLatLike аргумент должен быть указан как экземпляр LngLat, объект {lng: , lat: }, объект {lon: , lat: } или массив [, ], которыйЯ также не смог решить. Вот часть моего кода для проверки.

 export default class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
        allBuildings: [],
        lng: 5,
        lat: 45,
        zoom: 3,
        }

        componentDidMount() {
            const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [this.state.lng, this.state.lat],
            zoom: this.state.zoom
            });

            map.on('move', () => {
                this.setState({
                lng: map.getCenter().lng.toFixed(4),
                lat: map.getCenter().lat.toFixed(4),
                zoom: map.getZoom().toFixed(4)
                });
                });

            let marker = new mapboxgl.Marker({
                draggable: true,
                color: "blue"
            }).setLngLat([16.40, 50.54]).addTo(map) 


            marker.on('dragend', () => {
                const lngLat = marker.getLngLat();
                this.setState({
                    lng: lngLat.lng,
                    lat: lngLat.lat
                })
            })
            
            this.getMarkers()
            
            }

            getMarkers = () => {
                axios
                .get('/api/add')
                .then(res => {
                        this.setState({
                            allBuildings: res.data
                  res.data.forEach(building => {
                   const popup = new mapboxgl.Popup({ offset: 10})
                   const coords = [building.lng, building.lat]
                  new mapboxgl.Marker({
                       color: 'orange',
                       draggable: false })
                  .setPopup(popup)
                  .setLngLat(building.lng, building.lat)
                  .setHTML(<div>add later</div>)
                  .addTo(this.map)
                  })  
                })
                .catch(err => {
                    console.log(err)
                })
            }