Выполните действие, когда пользователь нажимает на карту или маркер в реагировать-Google-карты - PullRequest
Новая
       33

Выполните действие, когда пользователь нажимает на карту или маркер в реагировать-Google-карты

0 голосов
/ 24 января 2019

Я пытаюсь внедрить карты Google в свой проект реакции, используя пакет реагировать-google-карты .

Карта видна, однако я не могу выполнять другие действия, например, onClick. Документация и примеры не являются полезными, поскольку они используют перекомпоновку. Однако перекомпоновка больше не нужна из-за освобождения хуков в React v16.

Ниже приведен код, пожалуйста, укажите, что я делаю неправильно. Также советы о том, как писать код, основанный на хуках, а не перекомпоновывать, будут чрезвычайно полезны. Кроме того, я новичок в React, поэтому, возможно, допустил очевидную ошибку 

function handleMarkerClick() {
  console.log("function called");
}

const MyMapComponent = withScriptjs(
  withGoogleMap(props => ( <GoogleMap defaultZoom = {13} defaultCenter = {{ lat: 19.1998, lng: 72.8426 }}> 
  {props.isMarkerShown && ( <Marker position = { { lat: 19.1998, lng: 72.8426 }} onClick = { props.onMarkerClick } />)} 
  </GoogleMap>
  ))
);

function Register() {
  return ( <Wrapper>
      <MyMapComponent isMarkerShown = { true }
      googleMapURL = "https://maps.googleapis.com/maps/api/js?key=*******&v=3.exp&libraries=geometry,drawing,places"
      loadingElement = { < div style = {
          {
            height: `100%`
          }
        }
        />}
        containerElement = { < div style = {
            {
              height: `100vh`
            }
          }
          />}
          mapElement = { < div style = {
              {
                height: `100%`
              }
            }
            />} / >
             < /
            Wrapper>
          );
        }

export default Register;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

1 Ответ

0 голосов
/ 28 января 2019

Вам необходимо обновить код, например onClick = {(event) => {props.onMarkerClick (event)}} в компоненте Marker, после чего вы получите выходные данные lat и lang из события в handleMarkerClick (событие) {console.log (event.latLng.lat ())}

...