TypeError：无法读取React mapbox-gl项目中未定义的属性'getCanvasContainer'

问题描述

我正在使用mapBoxgl构建一个React MapBox项目（注意：不是React包装器版本）。到目前为止，我已经能够将想要添加的内容添加到地图和数据库中，但是我无法将所有数据显示为标记/点/弹出窗口。

我在Chrome中收到的消息是TypeError：无法读取未定义的属性'getCanvasContainer'。

我想知道这是我的地图本身（缺少MapBox的React包装器）还是坐标问题。现在，我正在手动将坐标设置为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)
                })
            }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）