0

所以我有点迷路了，我尝试了几个代码。我设法实现了标记，但是我认为我做错了事情以使它们真正可点击并显示一个信息窗口。

4

2 回答 2

0

你混合了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 密钥。随时问任何问题。

于 2018-08-25T17:24:59.557 回答
0

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

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

于 2018-08-25T11:42:52.120 回答