В основном моя проблема заключается в том, что мне нужно отфильтровать маркеры, которые в данный момент отображаются на карте (их примерно 7), но для этого мне нужно обновить страницу (компонент карты), потому что там я выполняю требованиепроверьте (проверка на соответствие) в этом случае цену, и мне нужно перечитать маркеры, которые соответствуют требованию.Когда карта загружается впервые, она отображает все маркеры из базы данных.
Я пытался использовать new window.google.maps.reload ();после нажатия кнопки и this.forceUpdate (), но не может понять логику
return (
<div>
<MenuItem
eventKey={3.1}
onClick={() => {
this.setState({ price: 2 });
new window.google.maps.reload();
}}
>
Budget
</MenuItem>
<MenuItem
eventKey={3.2}
onClick={() => {
this.setState({ price: 3 });
new window.google.maps.reload();
}}
>
Expensive
</MenuItem>
<MenuItem
eventKey={3.3}
onClick={() => {
this.setState({ price: 4 });
new window.google.maps.reload();
}}
>
Luxury
</MenuItem>
</DropdownButton>
</Nav>
</Navbar>
<Map
id="myMap"
options={{
center: { lat: 44.439663, lng: 26.096306 },
zoom: 12
}}
onMapLoad={map => {
if (this.state.price === 2) {
this.state.restaurants.map(restaurant => {
if (restaurant.price === 2) {
addMarker(restaurant, map);
}
});
} else {
this.state.restaurants.map(restaurant =>
addMarker(restaurant, map)
);
}
}}
/>
</div>
);
}}
экспорт по умолчанию App;