[尝试向我的mapbox地图渲染一些标记,但是似乎无法获得要渲染的标记。我怀疑它在.addTo方法中,但是我无法弄清楚我还会传递什么。他们渲染标记。想知道这是否是我要传递给.addTo的参数。
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
});
//get geojson data
fetch('/geojson')
.then(res => res.json())
.then(data => {
this.createMarkers(map, data);
})
}
createMarkers(map, jsonData) {
jsonData.features.forEach(marker => {
let el = document.createElement('div');
el.className = 'marker';
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
})
}
render() {
return (
<div>
<div ref={el => this.mapContainer = el} className="mapContainer" />
</div>
)
}