如何解决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 举报,一经查实,本站将立刻删除。