所以我有点迷路了，我尝试了几个代码。我设法实现了标记，但是我认为我做错了事情以使它们真正可点击并显示一个信息窗口。
【问题讨论】：
标签： javascript reactjs recompose google-maps-react
Marker 默认是不可点击的，除了传递 onClick 处理函数，你还需要传递 clickable 属性。
您可以查看文档中的所有 Marker 属性：https://tomchentw.github.io/react-google-maps/#marker
【讨论】：
您混合了react-google-maps 和google-maps-react。这是您的案例的工作示例：
请在 url 中添加您的 APIkey。
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;
react-google-maps 是基于 recomose 的智能组件，但您也可以将其设为类基础组件。
这是有效的代码框（暂时上线）：https://codesandbox.io/s/2wwjmx673r 不要忘记添加您的 API 密钥。 请随时提出任何问题。
【讨论】：