Попытайтесь отобразить infowindow при нажатии на элемент местоположения списка в google-maps-react

моя проблема в том, что пакет (google-maps-react) имеет функцию по умолчанию для отображения информационного окна

onMarkerClick = (props, marker, e) =>
  this.setState({
    selectedPlace: props,
    activeMarker: marker,
    showingInfoWindow: true
  });

и конкретный способ называть это

<Marker onClick={this.onMarkerClick} />

если у меня console.log (ActiveMarker) я получу этот объект на фото введите описание изображения здесь .. Кто-нибудь может объяснить, что это такое ?? потому что я хочу вызвать эту функцию с аргументами, и я не могу получить этот объект, чтобы передать его другой функции. Мне это нужно, потому что я хочу вызвать onMarkerClick внутри другой функции, которая обрабатывает щелчки по элементам списка. Заранее благодарю: слегка_smiling_face:

0
0
369
2

Ответы 2

Объект activeMarker предоставляет информацию о выбранном вами маркере (адрес, положение и т. д.). В примере, https://tomchentw.github.io/react-google-maps/#infowindow, я заметил, что у них есть элемент infoWindow, который показывает / скрывается в зависимости от свойства - у вас есть где-нибудь в коде, который переключает это?

<InfoWindow
  marker={this.state.activeMarker}
  visible={this.state.showingInfoWindow}>
    <div>
      <h1>{this.state.selectedPlace.name}</h1>
    </div>
</InfoWindow>

В настоящее время вы обновляете состояние, чтобы захватить маркер и selectedPlace. Чтобы вызвать всплывающее окно infoWindow из другой функции, все, что вам нужно, это переключить значение showInfoWindow. Вы также можете получить информацию о маркере, поскольку теперь она является частью вашего состояния.

спасибо, но я использую другой пакет npm. Это документация - это npmjs.com/package/google-maps-react

zoidev 10.08.2018 16:07

React-google-maps, google-react-maps - упс! Я обновил ответ.

munstrocity 10.08.2018 16:20

Вы всегда можете передать информацию новой функции, например

......
markerClicked(marker) {
   console.log('marker', marker);
   this.setState({
     activeMarker: marker,
     showingInfoWindow: true,
     selected_pin_lat: marker.position.lat(),
     selected_pin_lng: marker.position.lng(),,
   });
}

......
<Marker
  key={index}
  name={pin.type}
  position={{ lat: pin.location[0], lng: pin.location[1] }}
  onClick={(props, marker, clickEvent) => this.markerClicked(marker)}
  icon={
    new window.google.maps.MarkerImage(
      ICONS.mapPinIcon,
      null,
      null,
      null,
      new window.google.maps.Size(30, 30),
    )
  }
/>
......

Другие вопросы по теме