ビューポート座標からユーザーの位置を取得するマップがあり、それらの座標を使用して API からマーカーをフェッチします。問題は、マップを移動した後にのみマーカーが表示されることです。私は何が欠けているのか混乱しています:
componentDidMount(){
this.getInitialPosition();
this.fetchLocations();
this.getMarkers();
}
次に、ユーザーの場所を特定する関数:
getInitialPosition = () => {
navigator.geolocation.getCurrentPosition(position => {
let newViewport = {
height: "100vh",
width: "100vw",
latitude: position.coords.latitude,
longitude: position.coords.longitude,
zoom: 15
}
this.setState({
viewport: newViewport
});
});
}
次に、API からマーカーを取得します。
fetchLocations = () => {
fetch(`http://localhost:3000/locations/${this.state.viewport.latitude}/${this.state.viewport.longitude}`)
.then(resp => resp.json())
.then(locations => this.setState({locations}))
}
そして最後にマーカー:
getMarkers = () => {
return this.state.locations.map(location => {
return (
<Marker key={location.id} offsetLeft={-25} offsetTop={-70} latitude={parseFloat(location.lat)} longitude={parseFloat(location.lng)}>
<div className="marker-styles" onClick={() => {this.handleLocationClick(location.id)}} >
<p>{location.reviews}</p>
</div>
</Marker>
);
});
}
その後、マップを呼び出すと、次のようになります。
<MapGL
{...this.state.viewport}
onClick={this.mapClick}
attributionControl={false}
onViewportChange={this.onViewportChange}
mapboxApiAccessToken={TOKEN}
mapStyle="mapbox://styles/mapbox/streets-v10">
{this.getMarkers()}
</MapGL>
地図はわかりますが、マーカーがわかりません。誰かが私を正しい方向に向けることができますか? 問題は、約束とコンポーネントのライフサイクルに関する私の不安定な把握にあると思いますが、正直なところ、これを理解することができませんでした. 完全な(乱雑な)コードをここに貼り付けました:https://pastebin.com/j8dzYAsk