Как я могу отображать маркеры, основанные на некоторых фильтрах, используя API Google Maps в React - PullRequest
0 голосов
/ 02 января 2019

В основном моя проблема заключается в том, что мне нужно отфильтровать маркеры, которые в данный момент отображаются на карте (их примерно 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;

...