Question

所以我有点迷路了，我尝试了一些代码。我设法实现了标记，但是我认为我做的不正确，使它们实际上可以单击并显示InfoWindow。

Answer 1

默认情况下，addEventListener是不可点击的，除了传递onClick处理程序外，您还需要传递Marker道具。

您可以检查文档中的所有clickable道具：https://tomchentw.github.io/react-google-maps/#marker

Answer 2

您混用了react-google-maps和google-maps-react。这是您的情况的工作示例：请在网址中添加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密钥。随时问任何问题。

Google Maps React-使我的标记可点击

2 个答案: