Google Maps React - Делаем мои маркеры кликабельными

Question

Так что я немного заблудился и попробовал несколько кодов. Мне удалось реализовать маркеры, однако я думаю, что делаю что-то неправильное, чтобы сделать их кликабельными и отображать информационное окно.

Answer 1

Marker по умолчанию не кликабелен, кроме передачи обработчика onClick, вам нужно передать clickable двигательный

Вы можете проверить все Marker реквизиты в документации: https://tomchentw.github.io/react-google-maps/

Answer 2

Вы смешали react-google-maps а также google-maps-react, Вот рабочий пример для вашего случая: Пожалуйста, добавьте ваш API-ключ в URL.

App.js

import React from "react";
import ReactDOM from "react-dom";

const { compose, withProps, withStateHandlers } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} = require("react-google-maps");
const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");


const App = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
    center: { lat: 25.03, lng: 121.6 },
  }),
  withStateHandlers(() => ({
    isOpen: false,
  }), {
      onToggleOpen: ({ isOpen }) => () => ({
        isOpen: !isOpen,
      })
    }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={5}
    defaultCenter={props.center}
  >

    <Marker
      position={{ lat: 22.6273, lng: 120.3014 }}
      onClick={props.onToggleOpen}
    >
      {props.isOpen && <InfoBox
        onCloseClick={props.onToggleOpen}
        options={{ closeBoxURL: ``, enableEventPropagation: true }}
      >
        <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>
          <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>
            no search place
          </div>
        </div>
      </InfoBox>}
    </Marker>
  </GoogleMap>
);
export default App;

response-google-maps - это умный компонент, основанный на использовании рекомоз, но вы также можете сделать его базовым компонентом класса.

Это работает коды andbox (временно активен): https://codesandbox.io/s/2wwjmx673r Не забудьте добавить свой ключ API. не стесняйтесь задавать любые вопросы.